view_primitives 0.1.3 → 0.2.0

data/lib/generators/view_primitives/add/templates/switch/switch_component.rb.tt

@@ -4,18 +4,31 @@ module UI
   class SwitchComponent < ApplicationComponent
     # sr-only input, track label, and thumb are all siblings inside a relative wrapper
     # so every element can use peer-checked: / peer-focus-visible: / peer-disabled: directly.
-    WRAPPER = "relative inline-flex h-[1.15rem] w-8 shrink-0"
-    TRACK   = "absolute inset-0 cursor-pointer rounded-full border border-transparent shadow-xs " \
-              "transition-all bg-input peer-checked:bg-primary dark:bg-input/80 " \
-              "peer-focus-visible:border-ring peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50 " \
-              "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
-    THUMB   = "pointer-events-none absolute inset-y-0 left-[1px] my-auto z-10 block size-4 rounded-full " \
-              "bg-background ring-0 transition-transform " \
-              "translate-x-0 peer-checked:translate-x-[calc(100%-2px)]"
-
-    def initialize(label: nil, checked: false, **html_attrs)
+    WRAPPERS = {
+      default: "relative inline-flex h-[1.15rem] w-8 shrink-0",
+      sm: "relative inline-flex h-3.5 w-6 shrink-0"
+    }.freeze
+
+    TRACK = "absolute inset-0 cursor-pointer rounded-full border border-transparent shadow-xs " \
+            "transition-all bg-input peer-checked:bg-primary dark:bg-input/80 " \
+            "#{UI::Styles::PEER_FOCUS_RING} " \
+            "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+
+    THUMBS = {
+      default: "pointer-events-none absolute inset-y-0 left-[1px] my-auto z-10 block size-4 rounded-full " \
+               "bg-background ring-0 transition-transform translate-x-0 " \
+               "peer-checked:translate-x-[calc(100%-2px)] " \
+               "dark:bg-foreground dark:peer-checked:bg-primary-foreground",
+      sm: "pointer-events-none absolute inset-y-0 left-[1px] my-auto z-10 block size-3 rounded-full " \
+          "bg-background ring-0 transition-transform translate-x-0 " \
+          "peer-checked:translate-x-[calc(100%-2px)] " \
+          "dark:bg-foreground dark:peer-checked:bg-primary-foreground"
+    }.freeze
+
+    def initialize(label: nil, checked: false, size: :default, **html_attrs)
       @label = label
       @checked = checked
+      @size = size.to_sym
       @id = html_attrs[:id] || html_attrs[:name]&.gsub(/[\[\]]+/, "_") || "switch_#{object_id}"
       @extra_class = html_attrs.delete(:class)
       @html_attrs = html_attrs
@@ -31,21 +44,21 @@ module UI
     private
 
     def switch_widget
-      content_tag(:div, class: WRAPPER) do
+      content_tag(:div, class: WRAPPERS.fetch(@size, WRAPPERS[:default])) do
         input_attrs = { type: "checkbox", id: @id, class: "peer sr-only", role: "switch",
-                        "aria-checked": @checked.to_s }
+                        "aria-checked": @checked.to_s, "data-size": @size.to_s }
         input_attrs[:checked] = true if @checked
         input_attrs.merge!(@html_attrs)
         concat content_tag(:input, nil, **input_attrs)
         concat content_tag(:label, nil, for: @id, class: TRACK)
-        concat content_tag(:span, nil, class: THUMB, "aria-hidden": "true")
+        concat content_tag(:span, nil, class: THUMBS.fetch(@size, THUMBS[:default]), "aria-hidden": "true")
       end
     end
 
     def text_label
       content_tag(:label, @label,
         for: @id,
-        class: "cursor-pointer text-sm font-medium leading-none")
+        class: "cursor-pointer 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/tabs/tabs_component.html.erb

@@ -1,10 +1,12 @@
 <%= tag.div(
-  class: cn("w-full", @extra_class),
-  data: { controller: "tabs", tabs_index_value: @default_index },
+  class: cn("group/tabs flex w-full flex-col gap-2", @extra_class),
+  data: { slot: "tabs", controller: "tabs", tabs_index_value: @default_index },
   **@html_attrs
 ) do %>
   <div role="tablist"
-       class="inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground">
+       data-slot="tabs-list"
+       data-variant="default"
+       class="group/tabs-list inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground">
     <% @items_data.each_with_index do |item, i| %>
       <button type="button"
               role="tab"
@@ -13,7 +15,8 @@
               data-tabs-target="trigger"
               data-state="<%= i == @default_index ? 'active' : 'inactive' %>"
               aria-selected="<%= i == @default_index %>"
-              class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow">
+              data-slot="tabs-trigger"
+              class="relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all hover:text-foreground vp-focus-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm data-[state=active]:bg-background data-[state=active]:text-foreground dark:text-muted-foreground dark:hover:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
         <%= item[:title] %>
       </button>
     <% end %>
@@ -25,7 +28,8 @@
               data-tabs-target="trigger"
               data-state="<%= (@items_data.size + i) == @default_index ? 'active' : 'inactive' %>"
               aria-selected="<%= (@items_data.size + i) == @default_index %>"
-              class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow">
+              data-slot="tabs-trigger"
+              class="relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all hover:text-foreground vp-focus-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm data-[state=active]:bg-background data-[state=active]:text-foreground dark:text-muted-foreground dark:hover:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
         <%= tab.title %>
       </button>
     <% end %>
@@ -33,16 +37,18 @@
 
   <% @items_data.each_with_index do |item, i| %>
     <div role="tabpanel"
+         data-slot="tabs-content"
          data-tabs-target="panel"
-         class="mt-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+         class="flex-1 outline-none"
          <%= i != @default_index ? "hidden" : "" %>>
       <%= item[:content] %>
     </div>
   <% end %>
   <% tabs.each_with_index do |tab, i| %>
     <div role="tabpanel"
+         data-slot="tabs-content"
          data-tabs-target="panel"
-         class="mt-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+         class="flex-1 outline-none"
          <%= (@items_data.size + i) != @default_index ? "hidden" : "" %>>
       <%= tab.call %>
     </div>

data/lib/generators/view_primitives/add/templates/tags_input/tags_input_component.rb.tt

@@ -0,0 +1,136 @@
+# frozen_string_literal: true
+
+module UI
+  class TagsInputComponent < ApplicationComponent
+    TRIGGER = "flex flex-wrap items-center gap-1.5 min-h-9 w-full rounded-md border border-input " \
+              "bg-transparent px-3 py-1.5 text-sm shadow-xs cursor-text " \
+              "focus-within:outline-none focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50"
+    CHIP = "inline-flex items-center gap-1 rounded-md bg-secondary " \
+                  "text-secondary-foreground px-2 py-0.5 text-xs font-medium"
+    CHIP_LABEL = "tags-input-chip-label"
+    REMOVE = "ml-0.5 rounded-xs opacity-60 transition-opacity hover:opacity-100 #{UI::Styles::FOCUS_RING}"
+    FILTER = "min-w-[80px] flex-1 bg-transparent text-sm outline-none " \
+                  "placeholder:text-muted-foreground"
+    PANEL = "#{UI::Styles::POPOVER_PANEL} top-full left-0 mt-1 w-full overflow-hidden"
+    LIST = "max-h-[200px] overflow-y-auto p-1"
+    OPTION = "#{UI::Styles::MENU_ITEM} w-full cursor-pointer " \
+                  "hover:bg-accent hover:text-accent-foreground"
+    EMPTY = "py-4 text-center text-sm text-muted-foreground"
+
+    def initialize(name:, options: [], values: [], placeholder: "Select...", **html_attrs)
+      @name = name
+      @options = options
+      @values = Array(values).map(&:to_s)
+      @placeholder = placeholder
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn("relative", @extra_class),
+        data: {
+          controller: "tags-input",
+          action: "click@document->tags-input#closeOnClickOutside"
+        },
+        **@html_attrs) do
+        concat trigger
+        concat chip_template
+        concat dropdown
+      end
+    end
+
+    private
+
+    def trigger
+      content_tag(:div,
+        class: TRIGGER,
+        data: {"tags-input-target": "trigger", action: "click->tags-input#focusInput"}) do
+        concat safe_join(selected_options.map { |opt| chip(opt) })
+        concat filter_input
+      end
+    end
+
+    def chip(opt)
+      content_tag(:span,
+        class: CHIP,
+        data: {"tags-input-target": "chip", "tags-input-value": opt[:value]}) do
+        concat content_tag(:span, opt[:label], class: CHIP_LABEL)
+        concat tag.input(type: "hidden", name: "#{@name}[]", value: opt[:value])
+        concat remove_button(opt[:value])
+      end
+    end
+
+    def chip_template
+      content_tag(:template, data: {"tags-input-target": "chipTemplate"}) do
+        chip(value: "", label: "")
+      end
+    end
+
+    def remove_button(value)
+      content_tag(:button,
+        "×",
+        type: "button",
+        "aria-label": "Remove",
+        class: REMOVE,
+        data: {"tags-input-value": value, action: "click->tags-input#remove"})
+    end
+
+    def filter_input
+      tag.input(
+        type: "text",
+        placeholder: selected_options.empty? ? @placeholder : nil,
+        autocomplete: "off",
+        class: FILTER,
+        data: {
+          "tags-input-target": "input",
+          action: "focus->tags-input#open input->tags-input#filter keydown->tags-input#keydown"
+        }
+      )
+    end
+
+    def dropdown
+      content_tag(:div,
+        data: {"tags-input-target": "panel"},
+        hidden: true,
+        class: PANEL) do
+        concat content_tag(:div, class: LIST) {
+          concat options_list
+          concat content_tag(:div, "No results.",
+            class: EMPTY,
+            data: {"tags-input-target": "empty"},
+            hidden: true)
+        }
+      end
+    end
+
+    def options_list
+      safe_join(normalized_options.map { |opt|
+        content_tag(:button, opt[:label],
+          type: "button",
+          class: OPTION,
+          hidden: @values.include?(opt[:value]),
+          data: {
+            "tags-input-target": "option",
+            "tags-input-value": opt[:value],
+            "tags-input-label": opt[:label],
+            action: "click->tags-input#select"
+          })
+      })
+    end
+
+    def normalized_options
+      @options.map { |o|
+        case o
+        when Hash then {value: o[:value].to_s, label: o[:label].to_s}
+        when Array then {value: o[0].to_s, label: o[1].to_s}
+        else {value: o.to_s, label: o.to_s}
+        end
+      }
+    end
+
+    def selected_options
+      normalized_options.select { |o| @values.include?(o[:value]) }
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/tags_input/tags_input_controller.js

@@ -0,0 +1,90 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "panel", "option", "empty", "chip", "chipTemplate"]
+
+  open() {
+    this.panelTarget.hidden = false
+    this.filter()
+  }
+
+  close() {
+    this.panelTarget.hidden = true
+    this.inputTarget.value = ""
+    this.#resetOptionVisibility()
+  }
+
+  filter() {
+    const query = this.inputTarget.value.toLowerCase()
+    let visible = 0
+    this.optionTargets.forEach(option => {
+      if (option.hidden) return
+      const match = option.dataset.tagsInputLabel.toLowerCase().includes(query)
+      option.style.display = match ? "" : "none"
+      if (match) visible++
+    })
+    if (this.hasEmptyTarget) this.emptyTarget.hidden = visible > 0
+  }
+
+  select(event) {
+    const { tagsInputValue, tagsInputLabel } = event.currentTarget.dataset
+    event.currentTarget.hidden = true
+    event.currentTarget.style.display = ""
+    this.#addChip(tagsInputValue, tagsInputLabel)
+    this.inputTarget.value = ""
+    this.filter()
+    this.inputTarget.focus()
+  }
+
+  remove(event) {
+    event.stopPropagation()
+    const value = event.currentTarget.dataset.tagsInputValue
+    const option = this.optionTargets.find(o => o.dataset.tagsInputValue === value)
+    if (option) { option.hidden = false; option.style.display = "" }
+    event.currentTarget.closest("[data-tags-input-target~='chip']").remove()
+    this.filter()
+  }
+
+  focusInput() {
+    this.inputTarget.focus()
+    if (this.panelTarget.hidden) this.open()
+  }
+
+  keydown(event) {
+    if (event.key === "Backspace" && this.inputTarget.value === "") {
+      const chips = this.chipTargets
+      if (chips.length > 0) {
+        chips[chips.length - 1].querySelector("[data-action*='tags-input#remove']")?.click()
+      }
+    }
+    if (event.key === "Escape") this.close()
+    if (event.key === "Enter") {
+      event.preventDefault()
+      const first = this.optionTargets.find(o => !o.hidden && o.style.display !== "none")
+      if (first) first.click()
+    }
+  }
+
+  closeOnClickOutside({ target }) {
+    if (!this.element.contains(target)) this.close()
+  }
+
+  #addChip(value, label) {
+    const chip = this.chipTemplateTarget.content.cloneNode(true).firstElementChild
+    chip.dataset.tagsInputValue = value
+    chip.querySelector(".tags-input-chip-label").textContent = label
+    const hidden = chip.querySelector("input[type='hidden']")
+    if (hidden) hidden.value = value
+    const btn = chip.querySelector("[data-action*='tags-input#remove']")
+    if (btn) btn.dataset.tagsInputValue = value
+    this.inputTarget.insertAdjacentElement("beforebegin", chip)
+  }
+
+  #resetOptionVisibility() {
+    const selected = new Set(this.chipTargets.map(c => c.dataset.tagsInputValue))
+    this.optionTargets.forEach(o => {
+      o.hidden = selected.has(o.dataset.tagsInputValue)
+      o.style.display = ""
+    })
+  }
+}

data/lib/generators/view_primitives/add/templates/textarea/textarea_component.rb.tt

@@ -2,22 +2,13 @@
 
 module UI
   class TextareaComponent < ApplicationComponent
-    BASE = "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 " \
-           "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:cursor-not-allowed disabled:opacity-50 " \
-           "md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40"
-
     def initialize(**html_attrs)
-      @extra_class = html_attrs.delete(:class)
-      @html_attrs = html_attrs
+      extract_html_attrs(**html_attrs)
     end
 
     def call
       content_tag(:textarea, content,
-        class: cn(BASE, @extra_class),
+        class: cn(UI::Styles::TEXTAREA, @extra_class),
         **@html_attrs)
     end
   end

data/lib/generators/view_primitives/add/templates/timeline/timeline_component.rb.tt

@@ -21,7 +21,8 @@ module UI
 
     def call
       content_tag(:ol,
-        class: cn("relative border-l border-border ml-3", @extra_class),
+        class: cn("relative ml-3 border-l border-border/60", @extra_class),
+        data: { slot: "timeline" },
         **@html_attrs) do
         safe_join(items)
       end
@@ -31,15 +32,15 @@ module UI
       # variant: :default | :success | :warning | :destructive | :muted
       VARIANTS = {
         default: "bg-primary",
-        success: "bg-green-500",
-        warning: "bg-amber-500",
+        success: "bg-chart-2",
+        warning: "bg-chart-4",
         destructive: "bg-destructive",
         muted: "bg-muted-foreground"
       }.freeze
 
-      DOT_CLS = "absolute -left-1.5 mt-1.5 size-3 rounded-full ring-4 ring-background shrink-0"
-      DATE_CLS = "mb-0.5 text-xs font-normal text-muted-foreground"
-      TITLE_CLS = "text-sm font-medium text-foreground leading-snug"
+      DOT_CLS = "absolute -left-[7px] mt-1.5 size-3 shrink-0 rounded-full border-2 border-background"
+      DATE_CLS = "mb-1 text-xs text-muted-foreground"
+      TITLE_CLS = "text-sm font-medium leading-snug text-foreground"
       DESC_CLS = "mt-1 text-sm text-muted-foreground"
 
       # date:        optional date/time string shown above the title
@@ -57,7 +58,8 @@ module UI
 
       def call
         content_tag(:li,
-          class: cn("mb-8 ml-4 last:mb-0", @extra_class),
+          class: cn("mb-10 ml-6 last:mb-0", @extra_class),
+          data: { slot: "timeline-item" },
           **@html_attrs) do
           concat dot
           concat content_tag(:time, @date, class: DATE_CLS) if @date

data/lib/generators/view_primitives/add/templates/timepicker/timepicker_component.rb.tt

@@ -10,21 +10,23 @@ module UI
     # step:     minute step increment (default 1, common: 5, 15, 30)
 
     WRAPPER  = "relative inline-block"
-    TRIGGER  = "flex h-9 w-36 cursor-pointer items-center gap-2 rounded-md border border-input " \
-               "bg-background px-3 text-sm text-foreground shadow-xs " \
-               "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none transition " \
-               "aria-expanded:border-ring"
-    ICON_CLS = "size-4 shrink-0 text-muted-foreground"
-    POPOVER  = "absolute left-0 top-full z-50 mt-1 hidden w-max rounded-lg border border-border " \
-               "bg-popover p-3 shadow-md data-[open=true]:block"
+    TRIGGER  = "#{UI::Styles::PICKER_TRIGGER} w-36"
+    ICON_CLS = "size-4 shrink-0 text-muted-foreground pointer-events-none"
+    LABEL_PLACEHOLDER = "text-muted-foreground"
+    POPOVER  = "absolute left-0 top-full z-50 mt-2 hidden w-max p-3 #{UI::Styles::FIELD_PANEL} data-[open=true]:block"
     SPINNER_WRAP = "flex items-center justify-center gap-1"
     COL_CLS  = "flex flex-col items-center gap-1"
-    SPIN_BTN = "inline-flex size-7 items-center justify-center rounded-md " \
-               "text-muted-foreground hover:bg-accent hover:text-accent-foreground " \
-               "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none transition"
-    NUM_CLS  = "w-10 rounded-md border border-input bg-background px-1 py-0.5 text-center text-sm " \
-               "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
-    SEP_CLS  = "text-lg font-medium text-foreground pb-1"
+    SPIN_BTN = "inline-flex size-7 items-center justify-center rounded-md text-muted-foreground " \
+               "transition-colors outline-none " \
+               "hover:bg-accent hover:text-accent-foreground " \
+               "#{UI::Styles::FOCUS_RING} " \
+               "dark:hover:bg-accent/50"
+    NUM_CLS  = "h-9 w-10 rounded-md border border-input bg-transparent px-1 py-1 text-center text-sm shadow-xs " \
+               "transition-[color,box-shadow] outline-none " \
+               "#{UI::Styles::FOCUS_RING} " \
+               "dark:bg-input/30"
+    AMPM_CLS = NUM_CLS + " cursor-pointer select-none"
+    SEP_CLS  = "pb-1 text-lg font-medium text-foreground"
 
     def initialize(value: nil, name: nil, format: :h24, step: 1, **html_attrs)
       @value       = value
@@ -68,7 +70,9 @@ module UI
           action: "click->timepicker#toggle"
         }) do
         concat clock_icon
-        concat content_tag(:span, @value || "Pick time", data: { timepicker_target: "label" })
+        concat content_tag(:span, @value || "Pick time",
+          class: (@value ? nil : LABEL_PLACEHOLDER),
+          data: { timepicker_target: "label" })
       end
     end
 
@@ -113,7 +117,7 @@ module UI
       content_tag(:div, class: COL_CLS) do
         concat spin_btn("▲", "click->timepicker#toggleAmPm")
         concat content_tag(:span, "AM",
-          class: "w-10 rounded-md border border-input bg-background px-1 py-0.5 text-center text-sm cursor-pointer select-none",
+          class: AMPM_CLS,
           data: { timepicker_target: "ampm", action: "click->timepicker#toggleAmPm" })
         concat spin_btn("▼", "click->timepicker#toggleAmPm")
       end

data/lib/generators/view_primitives/add/templates/toaster/toaster_component.rb.tt

@@ -25,7 +25,7 @@ module UI
       top_center: "fixed top-4 left-1/2 -translate-x-1/2"
     }.freeze
 
-    CONTAINER_CLS = "z-50 flex flex-col gap-2 w-80 pointer-events-none"
+    CONTAINER_CLS = "toaster group z-50 flex w-80 flex-col gap-3 pointer-events-none"
 
     renders_many :toasts, "UI::ToasterComponent::ToastComponent"
 
@@ -53,14 +53,14 @@ module UI
       VARIANTS = {
         default: {border: "border-border", icon: nil, icon_color: "text-foreground"},
         success: {
-          border: "border-green-500/40",
+          border: "border-chart-2/40",
           icon: "M9 12l2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z",
-          icon_color: "text-green-500"
+          icon_color: "text-chart-2"
         },
         warning: {
-          border: "border-amber-500/40",
+          border: "border-chart-4/40",
           icon: "M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z",
-          icon_color: "text-amber-500"
+          icon_color: "text-chart-4"
         },
         destructive: {
           border: "border-destructive/40",
@@ -68,20 +68,20 @@ module UI
           icon_color: "text-destructive"
         },
         info: {
-          border: "border-blue-500/40",
+          border: "border-border",
           icon: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z",
-          icon_color: "text-blue-500"
+          icon_color: "text-muted-foreground"
         }
       }.freeze
 
-      TOAST_CLS = "pointer-events-auto flex items-start gap-3 rounded-lg border " \
-                  "bg-background px-4 py-3 shadow-lg text-foreground " \
+      TOAST_CLS = "pointer-events-auto flex items-start gap-3 rounded-md #{UI::Styles::BORDER} " \
+                  "bg-popover px-4 py-3 text-popover-foreground shadow-md outline-hidden " \
                   "transition-all duration-300 translate-y-2 opacity-0 " \
                   "data-[open=true]:translate-y-0 data-[open=true]:opacity-100"
 
       CLOSE_CLS = "ml-auto -mr-1 -mt-0.5 shrink-0 inline-flex size-6 items-center justify-center " \
                   "rounded-md text-muted-foreground hover:text-foreground hover:bg-accent " \
-                  "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none transition"
+                  "#{UI::Styles::FOCUS_RING} outline-hidden transition"
 
       # message:  toast body (required)
       # title:    optional bold heading

data/lib/generators/view_primitives/add/templates/toaster/toaster_controller.js

@@ -40,10 +40,10 @@ export default class extends Controller {
   #buildToast({ message = "", title = "", variant = "default", duration = 4000 }) {
     const borderCls = {
       default: "border-border",
-      success: "border-green-500/40",
-      warning: "border-amber-500/40",
+      success: "border-chart-2/40",
+      warning: "border-chart-4/40",
       destructive: "border-destructive/40",
-      info: "border-blue-500/40"
+      info: "border-border"
     }[variant] ?? "border-border"
 
     const div = document.createElement("div")
@@ -53,8 +53,8 @@ export default class extends Controller {
     div.dataset.toasterTarget = "toast"
     div.dataset.toasterDurationParam = duration
     div.className = [
-      "pointer-events-auto flex items-start gap-3 rounded-lg border",
-      "bg-background px-4 py-3 shadow-lg text-foreground",
+      "pointer-events-auto flex items-start gap-3 rounded-md vp-border",
+      "bg-popover px-4 py-3 text-popover-foreground shadow-md outline-hidden",
       "transition-all duration-300 translate-y-2 opacity-0",
       "data-[open=true]:translate-y-0 data-[open=true]:opacity-100",
       borderCls
@@ -71,7 +71,7 @@ export default class extends Controller {
         data-action="click->toaster#dismiss"
         class="ml-auto -mr-1 -mt-0.5 shrink-0 inline-flex size-6 items-center justify-center
                rounded-md text-muted-foreground hover:text-foreground hover:bg-accent
-               focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none transition">
+               vp-focus-ring outline-hidden transition">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" class="size-3.5" aria-hidden="true">
           <path d="M18 6 6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>

data/lib/generators/view_primitives/add/templates/toggle/toggle_component.rb.tt

@@ -4,21 +4,27 @@ module UI
   class ToggleComponent < ApplicationComponent
     BASE = "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap " \
            "transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground " \
-           "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+           "#{UI::Styles::FOCUS_RING} " \
            "disabled:pointer-events-none disabled:opacity-50 " \
            "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " \
            "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground " \
            "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 
+    VARIANTS = {
+      default: "bg-transparent",
+      outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+    }.freeze
+
     SIZES = {
       default: "h-9 min-w-9 px-2",
       sm:      "h-8 min-w-8 px-1.5",
       lg:      "h-10 min-w-10 px-2.5"
     }.freeze
 
-    def initialize(label = nil, pressed: false, size: :default, value: nil, **html_attrs)
+    def initialize(label = nil, pressed: false, variant: :default, size: :default, value: nil, **html_attrs)
       @label = label || html_attrs.delete(:label)
       @pressed = pressed
+      @variant = variant.to_sym
       @size = size.to_sym
       @value = value
       @extra_class = html_attrs.delete(:class)
@@ -34,7 +40,8 @@ module UI
         "data-controller": "toggle",
         "data-action": "click->toggle#toggle",
         value: @value,
-        class: cn(BASE, SIZES.fetch(@size, SIZES[:default]), @extra_class),
+        class: cn(BASE, VARIANTS.fetch(@variant, VARIANTS[:default]),
+          SIZES.fetch(@size, SIZES[:default]), @extra_class),
         **@html_attrs)
     end
   end

data/lib/generators/view_primitives/add/templates/toggle_group/toggle_group_component.rb.tt

@@ -2,15 +2,13 @@
 
 module UI
   class ToggleGroupComponent < ApplicationComponent
-    BASE = "inline-flex gap-1"
+    BASE = "group/toggle-group flex w-fit items-center gap-1 rounded-md " \
+           "data-[variant=outline]:shadow-xs"
 
-    # type:  :single — only one item active at a time
-    #        :multiple — multiple items can be active simultaneously
-    # value: currently active value (String) for :single,
-    #        or array of active values for :multiple
-    def initialize(type: :single, value: nil, **html_attrs)
+    def initialize(type: :single, value: nil, variant: :default, **html_attrs)
       @type = type.to_sym
       @value = Array(value).map(&:to_s)
+      @variant = variant.to_sym
       @extra_class = html_attrs.delete(:class)
       @html_attrs = html_attrs
     end
@@ -20,8 +18,10 @@ module UI
         content,
         class: cn(BASE, @extra_class),
         role: "group",
+        "data-variant": @variant.to_s,
         "data-controller": "toggle-group",
         "data-toggle-group-type-value": @type,
+        "data-slot": "toggle-group",
         **@html_attrs)
     end