view_primitives 0.1.3 → 0.2.0

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

@@ -8,19 +8,17 @@ module UI
     # 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 " \
+    CELL_CLS = "relative flex h-9 w-9 items-center justify-center rounded-md border border-input " \
+               "bg-transparent text-center text-sm shadow-xs transition-all outline-none " \
                "caret-transparent selection:bg-primary selection:text-primary-foreground " \
-               "focus:border-ring focus:ring-[3px] focus:ring-ring/50 " \
+               "#{UI::Styles::FOCUS_RING} " \
                "aria-invalid:border-destructive aria-invalid:ring-destructive/20 " \
-               "disabled:pointer-events-none disabled:opacity-50"
+               "dark:bg-input/30 dark:aria-invalid:ring-destructive/40 " \
+               "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
 
-    WRAPPER_CLS = "flex items-center gap-2"
-    SEPARATOR_CLS = "text-muted-foreground text-lg font-medium"
+    WRAPPER_CLS = "flex items-center gap-2 has-[:disabled]:opacity-50"
+    SEPARATOR_CLS = "text-muted-foreground"
 
-    # 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
@@ -35,11 +33,12 @@ module UI
     def call
       content_tag(:div,
         class: cn(WRAPPER_CLS, @extra_class),
+        "data-slot": "input-otp",
         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 content_tag(:div, sep == "-" ? separator_icon : sep, class: SEPARATOR_CLS, role: "separator") if sep
           concat digit_input(i)
         end
       end
@@ -47,6 +46,18 @@ module UI
 
     private
 
+    def separator_icon
+      content_tag(:svg,
+        content_tag(:path, nil, d: "M5 12h14", "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-4",
+        "aria-hidden": "true")
+    end
+
     def digit_input(index)
       content_tag(:input, nil,
         type: "text",
@@ -55,6 +66,7 @@ module UI
         autocomplete: index.zero? ? "one-time-code" : "off",
         name: "#{@name}[#{index}]",
         class: CELL_CLS,
+        "data-slot": "input-otp-slot",
         "aria-label": "Digit #{index + 1}",
         data: {
           input_otp_target: "cell",

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

@@ -4,7 +4,9 @@ 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"
+           "[&_svg:not([class*='size-'])]:size-3 " \
+           "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background " \
+           "dark:[[data-slot=tooltip-content]_&]:bg-background/10"
 
     def initialize(key = nil, **html_attrs)
       @key = key || html_attrs.delete(:label)

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

@@ -2,7 +2,7 @@
 
 module UI
   class ListGroupComponent < ApplicationComponent
-    BASE = "divide-y divide-border overflow-hidden rounded-lg border"
+    BASE = "flex flex-col divide-y divide-border overflow-hidden rounded-md #{UI::Styles::BORDER}"
 
     def initialize(**html_attrs)
       @extra_class = html_attrs.delete(:class)
@@ -10,7 +10,11 @@ module UI
     end
 
     def call
-      content_tag(:ul, content, class: cn(BASE, @extra_class), **@html_attrs)
+      content_tag(:ul, content,
+        class: cn(BASE, @extra_class),
+        role: "list",
+        data: { slot: "item-group" },
+        **@html_attrs)
     end
   end
 end

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

@@ -2,12 +2,13 @@
 
 module UI
   class ListGroupItemComponent < ApplicationComponent
-    BASE = "flex items-center justify-between px-4 py-3 text-sm"
+    BASE = "flex items-center justify-between gap-4 px-4 py-3 text-sm transition-colors duration-100 " \
+           "outline-none #{UI::Styles::FOCUS_RING}"
 
     VARIANTS = {
-      default: "text-foreground hover:bg-muted",
-      active:  "bg-primary text-primary-foreground",
-      muted:   "text-muted-foreground hover:bg-muted"
+      default: "text-foreground hover:bg-accent/50",
+      active:  "bg-accent font-medium text-accent-foreground",
+      muted:   "text-muted-foreground hover:bg-accent/50"
     }.freeze
 
     def initialize(label = nil, href: nil, active: false, variant: :default, **html_attrs)
@@ -24,6 +25,7 @@ module UI
       content_tag(tag_name,
         content.presence || @label,
         class: cn(BASE, VARIANTS.fetch(@variant, VARIANTS[:default]), @extra_class),
+        data: { slot: "item" },
         **extra,
         **@html_attrs)
     end

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

@@ -23,7 +23,8 @@ module UI
     #   target:  link target, e.g. "_blank"
     #   rel:     link rel attribute
 
-    WRAPPER_CLS = "relative inline-block"
+    WRAPPER_CLS = "relative inline-block overflow-hidden rounded-md #{UI::Styles::BORDER} shadow-xs"
+    IMG_CLS     = "block h-auto w-full max-w-full rounded-md"
 
     def initialize(src:, alt:, areas: [], width: nil, height: nil,
                    loading: :lazy, map_name: nil, **html_attrs)
@@ -47,7 +48,7 @@ module UI
     private
 
     def img_tag
-      attrs = { src: @src, alt: @alt, usemap: "##{@map_name}", loading: @loading }
+      attrs = { src: @src, alt: @alt, usemap: "##{@map_name}", loading: @loading, class: IMG_CLS }
       attrs[:width]  = @width  if @width
       attrs[:height] = @height if @height
       tag.img(**attrs)

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

@@ -5,25 +5,25 @@ module UI
     # 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 " \
+    TRIGGER_CLS = "inline-flex h-9 w-max 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"
+                  "#{UI::Styles::FOCUS_RING} " \
+                  "data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground " \
+                  "data-[state=open]:hover:bg-accent"
 
-    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"
+    PANEL_CLS = "#{UI::Styles::POPOVER_PANEL} left-0 top-full mt-2 w-full overflow-hidden"
 
     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 " \
+    ITEM_CLS = "group flex items-start gap-3 rounded-md p-2 text-sm transition-all outline-none " \
                "hover:bg-accent hover:text-accent-foreground " \
-               "focus-visible:ring-[3px] focus-visible:ring-ring/50"
+               "#{UI::Styles::FOCUS_RING}"
 
     ITEM_TITLE = "font-medium leading-none"
-    ITEM_DESC  = "mt-1 text-xs text-muted-foreground group-hover:text-accent-foreground/70"
+    ITEM_DESC  = "mt-1 text-xs leading-normal text-muted-foreground"
 
     CHEVRON_PATH = "m6 9 6 6 6-6"
 
@@ -87,7 +87,7 @@ module UI
         fill: "none",
         stroke: "currentColor",
         "stroke-width": "2",
-        class: "size-3 transition-transform duration-200 data-[state=open]:rotate-180",
+        class: "size-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180",
         "aria-hidden": "true",
         data: { mega_menu_target: "chevron" })
     end

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

@@ -4,13 +4,13 @@ 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 " \
+    BAR  = "flex h-9 items-center gap-1 rounded-md #{UI::Styles::BORDER} bg-background p-1 shadow-xs"
+    ITEM = "#{UI::Styles::MENU_ITEM} w-full whitespace-nowrap 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(**html_attrs)

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

@@ -2,12 +2,11 @@
 
 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"
+    TRIGGER = "flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none " \
+              "focus:bg-accent focus:text-accent-foreground " \
+              "data-[state=open]:bg-accent data-[state=open]: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"
+    PANEL = "#{UI::Styles::POPOVER_PANEL} left-0 top-full z-50 mt-1 w-max min-w-[12rem] overflow-hidden p-1"
 
     def initialize(label:, **html_attrs)
       @label       = label

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

@@ -2,9 +2,13 @@
 
 module UI
   class NavbarComponent < ApplicationComponent
-    LINK_BASE  = "text-sm font-medium transition-colors hover:text-foreground"
+    LINK_BASE  = "inline-flex h-9 items-center rounded-md px-3 text-sm font-medium transition-[color,box-shadow] " \
+                 "outline-none hover:bg-accent hover:text-accent-foreground " \
+                 "#{UI::Styles::FOCUS_RING}"
     LINK_IDLE  = "text-muted-foreground"
-    LINK_ACTIVE = "text-foreground"
+    LINK_ACTIVE = "bg-accent/50 text-accent-foreground"
+    MOBILE_LINK = "block rounded-md px-3 py-2 text-sm font-medium transition-colors outline-none " \
+                  "hover:bg-accent hover:text-accent-foreground #{UI::Styles::FOCUS_RING}"
 
     # items: [{ label:, href:, active: (optional) }]
     # Block content is placed in the right action area (e.g. a Sign in button).
@@ -18,21 +22,27 @@ module UI
 
     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),
+        class: cn("sticky top-0 z-50 w-full border-b border-border bg-background/95 shadow-xs backdrop-blur supports-[backdrop-filter]:bg-background/80", @extra_class),
+        "aria-label": "Main navigation",
         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
+        concat header_bar
+        concat mobile_menu if @items.any?
       end
     end
 
     private
 
+    def header_bar
+      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
+
     def brand_link
       return "" unless @brand
 
@@ -70,13 +80,43 @@ module UI
 
       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",
+        class: "inline-flex size-9 items-center justify-center rounded-md text-muted-foreground transition-colors outline-none hover:bg-accent hover:text-accent-foreground #{UI::Styles::FOCUS_RING} md:hidden",
         data: { action: "click->navbar#toggle", navbar_target: "toggle" },
+        "aria-expanded": "false",
+        "aria-controls": mobile_menu_id,
         "aria-label": "Toggle menu") do
         hamburger_icon
       end
     end
 
+    def mobile_menu
+      content_tag(:div,
+        id: mobile_menu_id,
+        class: "md:hidden border-b border-border bg-background px-4 py-3",
+        data: { navbar_target: "menu" },
+        hidden: true) do
+        concat content_tag(:div, class: "flex flex-col gap-1") {
+          safe_join(@items.map { |item| mobile_nav_link(item) })
+        }
+        concat mobile_action_area if content?
+      end
+    end
+
+    def mobile_nav_link(item)
+      content_tag(:a, item[:label],
+        href: item[:href],
+        class: cn(MOBILE_LINK, item[:active] ? LINK_ACTIVE : LINK_IDLE),
+        data: { action: "click->navbar#close" })
+    end
+
+    def mobile_action_area
+      content_tag(:div, content, class: "mt-3 flex flex-col gap-2 border-t border-border pt-3")
+    end
+
+    def mobile_menu_id
+      @mobile_menu_id ||= "navbar-menu-#{object_id}"
+    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">

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

@@ -4,8 +4,13 @@ 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
+    const open = this.menuTarget.hidden
+    this.menuTarget.hidden = !open
+    this.toggleTarget.setAttribute("aria-expanded", open ? "true" : "false")
+  }
+
+  close() {
+    this.menuTarget.hidden = true
+    this.toggleTarget.setAttribute("aria-expanded", "false")
   }
 }

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

@@ -2,32 +2,28 @@
 
 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"
+    ROOT = "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center"
+    LIST = "group 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 " \
+              "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground " \
+              "#{UI::Styles::FOCUS_RING} " \
               "disabled:pointer-events-none disabled:opacity-50 " \
-              "data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground"
+              "data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground " \
+              "data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
 
-    # 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 " \
+               "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground " \
+               "#{UI::Styles::FOCUS_RING} " \
                "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"
+    CONTENT = "#{UI::Styles::POPOVER_PANEL} top-full left-0 mt-1.5 min-w-48 overflow-hidden p-2 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 " \
+    PANEL_LINK = "flex flex-col gap-1 rounded-md p-2 text-sm transition-all outline-none " \
+                 "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground " \
+                 "#{UI::Styles::FOCUS_RING} " \
                  "aria-[current]:bg-accent/50 aria-[current]:text-accent-foreground"
 
     CHEVRON_PATH = "m6 9 6 6 6-6"

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

@@ -2,14 +2,8 @@
 
 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"
+    SPINNER_HIDE = "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none " \
+                   "[&::-webkit-outer-spin-button]:appearance-none"
 
     # min / max / step: native number input attributes
     # value: initial value
@@ -18,12 +12,11 @@ module UI
       @max   = max
       @step  = step
       @value = value
-      @extra_class = html_attrs.delete(:class)
-      @html_attrs  = html_attrs
+      extract_html_attrs(**html_attrs)
     end
 
     def call
-      attrs = { type: "number", class: cn(BASE, @extra_class) }
+      attrs = { type: "number", class: cn(UI::Styles::INPUT, SPINNER_HIDE, @extra_class) }
       attrs[:min]   = @min   unless @min.nil?
       attrs[:max]   = @max   unless @max.nil?
       attrs[:step]  = @step  unless @step.nil?

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

@@ -2,9 +2,10 @@
 
 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"
+    ITEM   = "inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-md border border-input " \
+             "bg-background text-sm font-medium shadow-xs transition-colors outline-none " \
+             "hover:bg-accent hover:text-accent-foreground " \
+             "#{UI::Styles::FOCUS_RING}"
     ACTIVE = "bg-primary text-primary-foreground shadow hover:bg-primary/90 border-transparent"
     MUTED  = "cursor-not-allowed opacity-50 pointer-events-none"
 

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

@@ -54,7 +54,8 @@ module UI
     private
 
     def fallback_img
-      attrs = { src: @src, alt: @alt, loading: @loading, class: cn("max-w-full", @extra_class) }
+      attrs = { src: @src, alt: @alt, loading: @loading,
+                class: cn("h-auto w-full max-w-full rounded-md", @extra_class) }
       attrs[:width]  = @width  if @width
       attrs[:height] = @height if @height
       tag.img(**attrs)

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

@@ -4,8 +4,7 @@ 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"
+    PANEL_BASE = "#{UI::Styles::POPOVER_PANEL} w-72 p-4"
 
     ALIGN = {
       start:  "left-0",

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

@@ -16,12 +16,14 @@ module UI
     def call
       content_tag(:div,
         class: cn(TRACK, @extra_class),
+        data: { slot: "progress" },
         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)}%")
+        content_tag(:div, nil, class: BAR, style: "width: #{@pct.round(2)}%",
+          data: { slot: "progress-indicator" })
       end
     end
   end

data/lib/generators/view_primitives/add/templates/qr_code/qr_code_component.rb.tt

@@ -12,7 +12,7 @@ module UI
     #        <%%= RQRCode::QRCode.new("https://example.com").as_svg(viewbox: true).html_safe %>
     #      <%% end %>
 
-    WRAPPER_CLS = "inline-flex items-center justify-center overflow-hidden rounded-lg bg-white p-3"
+    WRAPPER_CLS = "inline-flex items-center justify-center overflow-hidden rounded-md #{UI::Styles::BORDER} bg-card p-4 shadow-xs"
 
     # src:  image URL for a pre-rendered QR (renders an <img>)
     # alt:  accessible label for the <img> (default: "QR code")

data/lib/generators/view_primitives/add/templates/radio_group/radio_group_component.rb.tt

@@ -12,7 +12,7 @@ module UI
 
     def call
       content_tag(:div,
-        class: cn("grid gap-2", @extra_class),
+        class: cn("grid gap-3", @extra_class),
         role: "radiogroup",
         **@html_attrs) do
         if @items.any?
@@ -35,9 +35,12 @@ module UI
 
     def radio_input(item, id)
       attrs = { type: "radio", name: @name, value: item[:value], id: id,
-                class: "h-4 w-4 border border-primary text-primary accent-primary " \
-                       "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " \
-                       "disabled:cursor-not-allowed disabled:opacity-50" }
+                class: "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs " \
+                       "transition-[color,box-shadow] outline-none accent-primary " \
+                       "#{UI::Styles::FOCUS_RING} " \
+                       "disabled:cursor-not-allowed disabled:opacity-50 " \
+                       "aria-invalid:border-destructive aria-invalid:ring-destructive/20 " \
+                       "dark:bg-input/30 dark:aria-invalid:ring-destructive/40" }
       attrs[:checked] = true if item[:checked]
       content_tag(:input, nil, **attrs)
     end
@@ -45,7 +48,7 @@ module UI
     def radio_label(item, id)
       content_tag(:label, item[:label],
         for: id,
-        class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")
+        class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50")
     end
   end
 end

data/lib/generators/view_primitives/add/templates/range/range_component.rb.tt

@@ -2,9 +2,8 @@
 
 module UI
   class RangeComponent < ApplicationComponent
-    BASE = "w-full cursor-pointer appearance-none rounded-full bg-input outline-none " \
-           "h-2 accent-primary " \
-           "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+    BASE = "h-2 w-full cursor-pointer appearance-none rounded-full bg-muted outline-none accent-primary " \
+           "#{UI::Styles::FOCUS_RING} " \
            "disabled:pointer-events-none disabled:opacity-50 " \
            "[&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none " \
            "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary " \

data/lib/generators/view_primitives/add/templates/rating/rating_component.rb.tt

@@ -30,7 +30,7 @@ module UI
     def star(filled)
       content_tag(:svg,
         content_tag(:path, nil, d: STAR_PATH, "stroke-linecap": "round", "stroke-linejoin": "round"),
-        class: filled ? "size-5 text-yellow-400" : "size-5 text-muted-foreground",
+        class: filled ? "size-4 fill-primary text-primary" : "size-4 fill-muted text-muted",
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: filled ? "currentColor" : "none",

data/lib/generators/view_primitives/add/templates/rating_input/rating_controller.js

@@ -21,7 +21,7 @@ export default class extends Controller {
   #render(upTo) {
     this.starTargets.forEach((star, i) => {
       const filled = i < upTo
-      star.classList.toggle("text-yellow-400", filled)
+      star.classList.toggle("text-primary", filled)
       star.classList.toggle("text-muted-foreground", !filled)
       const svg = star.querySelector("svg")
       if (svg) svg.setAttribute("fill", filled ? "currentColor" : "none")

data/lib/generators/view_primitives/add/templates/rating_input/rating_input_component.rb.tt

@@ -45,8 +45,9 @@ module UI
         star_svg(filled),
         type: "button",
         class: cn(
-          "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
-          filled ? "text-yellow-400" : "text-muted-foreground"
+          "rounded-sm transition-colors outline-none",
+          UI::Styles::FOCUS_RING,
+          filled ? "text-primary" : "text-muted-foreground"
         ),
         data: {
           rating_target: "star",
@@ -59,7 +60,7 @@ module UI
     def star_svg(filled)
       content_tag(:svg,
         content_tag(:path, nil, d: STAR_PATH, "stroke-linecap": "round", "stroke-linejoin": "round"),
-        class: "size-6 pointer-events-none",
+        class: "size-5 pointer-events-none",
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         fill: filled ? "currentColor" : "none",