railsui 3.1.0

data/app/helpers/railsui/application_helper.rb

@@ -0,0 +1,269 @@
+module Railsui
+  module ApplicationHelper
+    def nav_link_to(name = nil, options = {}, html_options = {}, &block)
+      if block
+        html_options = options
+        options = name
+        name = block
+      end
+
+      url = url_for(options)
+      starts_with = html_options.delete(:starts_with)
+      html_options[:class] = Array.wrap(html_options[:class])
+      active_class = html_options.delete(:active_class) || "nav-link-active"
+      inactive_class = html_options.delete(:inactive_class) || ""
+
+      active = if (paths = Array.wrap(starts_with)) && paths.present?
+        paths.any? { |path| request.path.start_with?(path) }
+      else
+        request.path == url
+      end
+
+      classes = active ? active_class : inactive_class
+      html_options[:class] << classes unless classes.empty?
+
+      html_options.except!(:class) if html_options[:class].empty?
+
+      return link_to url, html_options, &block if block
+
+      link_to name, url, html_options
+    end
+
+    def theme_preview_link(theme)
+      case theme
+      when Railsui::Default::THEMES[:hound]
+        Railsui::Default::THEME_PREVIEW_LINK[:hound]
+      when Railsui::Default::THEMES[:shepherd]
+        Railsui::Default::THEME_PREVIEW_LINK[:shepherd]
+      else
+        nil
+      end
+    end
+
+    def code(code)
+      content_tag :span, html_escape(code), class: "text-neutral-900 font-mono font-semibold text-[15px] dark:text-rose-400 bg-neutral-100 px-1 py-px dark:bg-transparent rounded whitespace-pre"
+    end
+
+    def render_snippet(options={})
+      active_tab = options[:active_tab] ||= "html"
+      html_filename = options[:html_filename] ||= ".html"
+      erb_filename = options[:erb_filename] ||= ".html.erb"
+      haml_filename = options[:haml_filename] ||= ".haml.erb"
+      js_filename = options[:js_filename] ||= ".js"
+      ruby_filename = options[:ruby_filename] ||= ".rb"
+      css_filename = options[:css_filename] ||= ".css"
+
+
+      render partial: "railsui/shared/snippet", locals: {
+        active_tab: active_tab,
+        html_filename: html_filename,
+        erb_filename: erb_filename,
+        haml_filename: haml_filename,
+        js_filename: js_filename,
+        ruby_filename: ruby_filename,
+        css_filename: css_filename
+      }
+    end
+
+    def theme_name
+      Railsui.config.theme
+    end
+
+    def theme_key
+      theme_name.to_sym
+    end
+
+    def heading(options={})
+      text = options[:text] || "Enter some text"
+      tag = options[:tag] || :h2
+      id = options[:id]
+      classes = options[:class]
+
+      content_tag tag.to_sym, text, id: id, class: "#{classes} tracking-[-0.025em]"
+    end
+
+    def email_viewer(subject="A sample subject", &block)
+      render "railsui/shared/rui_email_preview", subject: subject, block: block, flush: true
+    end
+
+    def box_label_classes(options={})
+      "rounded-lg bg-white shadow-sm border border-slate-200 block select-none hover:shadow-none group bg-gradient-to-br from-white to-slate-50 dark:from-slate-700 dark:to-slate-800 dark:border-slate-600 dark:shadow-sm #{options[:offset] == false ? "px-4 pb-4 pt-1" : "p-4" }"
+    end
+
+    def box_check_classes
+      "text-indigo-600 form-checkbox rounded focus:outline-hidden ring-2 ring-transparent focus:ring-slate-100  mr-2 border-slate-500 size-5
+      focus:dark:ring-slate-700
+      focus:dark:ring-opacity-20
+      focus:dark:bg-slate-600  dark:bg-slate-700
+      dark:ring-transparent"
+    end
+
+    def help_text &block
+      content_tag :div, class: "prose prose-sm prose-neutral dark:prose-invert max-w-full" do
+        yield
+      end
+    end
+
+    def doc_label(type)
+      case type
+      when :javascript
+        content_tag :p, "JavaScript", class:"bg-yellow-300 text-black rounded-full px-3 py-1 font-semibold inline-block text-xs mb-3"
+      when :stimulus
+        content_tag :p, "Stimulus.js", class: "bg-yellow-300 text-black rounded-full px-3 py-1 font-semibold inline-block text-xs mb-3"
+      when :ruby
+        content_tag :p, "Ruby", class: "bg-red-700 text-white rounded-full px-3 py-1 font-semibold inline-block text-xs mb-3"
+      when :tutorial
+        content_tag :p, "Tutorial", class: "bg-blue-500 text-white rounded-full px-3 py-1 font-semibold inline-block text-xs mb-3"
+      when :demo
+        content_tag :p, "Demo", class: "bg-emerald-50 text-emerald-600 rounded-full px-3 py-1 font-semibold inline-block text-xs mb-3"
+      end
+    end
+
+    def callout
+      "railsui/shared/callout"
+    end
+
+    def preview(variant = nil)
+      case variant
+      when "base"
+        "railsui/shared/preview"
+      when "zinc"
+        "railsui/shared/preview_zinc"
+      when "dark_zinc"
+        "railsui/shared/preview_dark_zinc"
+      when "gray"
+        "railsui/shared/preview_gray"
+      when "dark"
+        "railsui/shared/preview_dark"
+      else
+        "railsui/shared/preview"
+      end
+    end
+
+    def quick_link(title: nil, component: nil)
+      content_tag :li do
+        link_to title.capitalize, "##{component.parameterize}-#{title.parameterize}", class: "text-sm py-1 px-3 rounded font-medium inline-block bg-white border border-slate-300 hover:shadow-sm hover:border-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:hover:border-slate-600 dark:hover:bg-slate-700/80 transition ease-in-out duration-200", data: { action: "click->railsui-smooth#scroll" }
+      end
+    end
+
+    def route_verb_classes(verb)
+      case verb
+      when "GET"
+        "bg-indigo-50 text-indigo-500 dark:bg-indigo-400/50 dark:text-indigo-100"
+      when "PATCH"
+        "bg-cyan-50 text-cyan-500 dark:bg-cyan-400/50 dark:text-cyan-100"
+      when "PUT"
+        "bg-amber-50 text-amber-500 dark:bg-amber-400/50 dark:text-amber-100"
+      when "POST"
+        "bg-emerald-50 text-emerald-500 dark:bg-emerald-400/50 dark:text-emerald-100"
+      when "DELETE"
+        "bg-rose-50 text-rose-500 dark:bg-rose-400/50 dark:text-rose-100"
+      else
+        "bg-slate-50 text-slate-500 dark:bg-slate-700 dark:text-slate-100"
+      end
+    end
+
+    def tag_label(tag)
+      base_classes = "rounded text-xs px-1 py-px font-semibold inline-flex items-center justify-center"
+
+      case tag
+      when "marketing"
+        content_tag :div, tag.humanize, class: "#{base_classes} bg-indigo-50 text-indigo-500 dark:bg-indigo-500/40 dark:text-indigo-200"
+      when "admin"
+        content_tag :div, tag.humanize, class: "#{base_classes} bg-sky-50 text-sky-500 dark:bg-sky-500/40 dark:text-sky-200"
+      else
+        content_tag :div, tag.humanize, class: "#{base_classes} bg-slate-50 text-slate-500 dark:bg-slate-500/40 dark:text-slate-200"
+      end
+    end
+
+    def theme_colors(group,val)
+      Railsui::Default::THEME_COLORS[Railsui.config.theme.to_sym][group][val]
+    end
+
+    def example
+      "railsui/shared/code_example"
+    end
+
+    def component_link(name, href)
+      content_tag :li do
+        link_to name, href, class: "block py-0.5 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white truncate", data: {
+          action: "click->railsui-smooth#scroll",
+          railsui_scroll_spy_target: "link"
+        }
+      end
+    end
+
+    def divider
+      content_tag :hr, nil, class: "my-6 dark:border-neutral-700/80 border-neutral-200/70"
+    end
+
+    def system_nav_item(label:, path:)
+      render "railsui/shared/system_nav_item", label: label, path: path
+    end
+
+    def engine_icon_path(icon_path)
+      "/#{Railsui::Engine.root.join("app/assets/images/#{icon_path}")}"
+    end
+
+    def rui_badge(label, variant: :blue)
+      variant_class = case variant
+        when :blue
+          "bg-blue-500 text-white"
+        when :green
+          "bg-green-500 text-white"
+        when :red
+          "bg-red-500 text-white"
+        when :yellow
+          "bg-yellow-500 text-black"
+        when :gray
+          "bg-neutral-200 text-neutral-700"
+      end
+      content_tag :div, label, class: "#{variant_class} rounded-full px-2 py-1 text-xs font-semibold inline-flex my-0"
+    end
+
+    def input_classes
+      "rounded-md px-4 py-2 border border-neutral-300/80 bg-white focus:border-neutral-500/80 focus:ring-4 focus:ring-neutral-100/80 focus:shadow-none focus:outline-hidden dark:bg-neutral-800 dark:border-neutral-700/80 dark:focus:border-neutral-500 placeholder-neutral-500/60 dark:focus:ring-neutral-500/40 dark:placeholder:text-neutral-300/60 font-normal antialiased font-sans w-full dark:text-neutral-50 text-neutral-800"
+    end
+
+    def label_classes
+      "block mb-2 font-medium text-[14px] dark:text-white"
+    end
+
+    def button_classes(variant: "black", size: "md")
+      base_classes = "rounded-md px-3 py-[5px] ring-4 ring-transparent text-base transition-colors ease-in-out duration-300 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed text-center text-[14.5px] font-semibold inline-flex gap-2 items-center justify-center"
+
+      size_classes = case size
+      when "lg"
+        "py-3 px-6 text-lg"
+      when "sm"
+        "py-0.5 px-3 text-[13.5px]"
+      else # md
+        "py-[5px] px-3 text-[14.5px]"
+      end
+
+      variant_classes = case variant
+      when "white"
+        "bg-white hover:bg-neutral-50/50 hover:shadow-none shadow-xs text-neutral-800/80 border border-neutral-300 shadow-neutral-300/20 focus:ring-4 hover:border-neutral-600/40 focus:ring-neutral-100/70 focus:border-neutral-300/90 dark:bg-neutral-700/60 dark:text-white dark:border-neutral-500/30 dark:shadow-neutral-950/40 dark:hover:bg-neutral-800/90 dark:focus:ring-neutral-700/80 dark:focus:border-neutral-500/80"
+      when "offwhite"
+        "bg-neutral-200/20 hover:bg-neutral-50/50 hover:shadow-none shadow-xs text-neutral-800/80 border border-neutral-300/80 shadow-neutral-300/20 focus:ring-4 hover:border-neutral-600/40 focus:ring-neutral-100/70 focus:border-neutral-300/90 dark:bg-neutral-700/60 dark:border-neutral-500/30 dark:shadow-neutral-950/40 dark:hover:bg-neutral-800/90 dark:focus:ring-neutral-700/80 dark:focus:border-neutral-500/80"
+      when "transparent"
+        "bg-transparent text-neutral-700 focus:ring-neutral-100/70 hover:bg-neutral-50/70 hover:text-neutral-800 dark:focus:ring-neutral-600/80 dark:hover:bg-neutral-900 focus:outline focus:outline-neutral-200/80 dark:focus:outline-neutral-700/80 dark:text-neutral-200"
+      when "black"
+        "bg-neutral-950 text-neutral-100 focus:ring-neutral-100/70 hover:text-neutral-50 hover:ring-4 hover:ring-black/10 focus:outline focus:outline-neutral-200/80 dark:focus:outline-neutral-700/80 dark:bg-neutral-50 dark:text-neutral-950 dark:hover:bg-neutral-100/80 dark:hover:text-neutral-950 dark:focus:ring-neutral-700/30"
+      end
+
+      [base_classes, size_classes, variant_classes].join(" ")
+    end
+
+
+    def snippet_classes(variant: "active")
+      case variant_classes = variant
+      when "active"
+        "bg-white px-3 py-1.5 rounded-md shadow flex items-center justify-center gap-2 text-[13px] font-semibold focus:ring-4 focus:ring-blue-600 group dark:bg-neutral-800/90 dark:text-neutral-100 dark:focus:ring-blue-600/50 dark:text-neutral-300"
+      when "inactive"
+        "bg-transparent px-3 py-1.5 rounded-md shadow-none flex items-center justify-center gap-2 text-[13px] font-semibold dark:text-neutral-300"
+      end
+    end
+
+  end
+end

data/app/helpers/railsui/framework_helper.rb

@@ -0,0 +1,23 @@
+module Railsui
+  module FrameworkHelper
+    def framework_version_label
+      content_tag :div, framework_version, class: "bg-slate-200 rounded-full px-2 py-px font-semibold text-xs flex items-center dark:bg-slate-700 dark:text-slate-100"
+    end
+
+    def framework_version
+      package_version = nil
+      version = File.open(Rails.root.join("package.json")) do |f|
+        f.each_line do |line|
+          if line =~ /"tailwindcss"/
+            package_version = line.match(/(?<=\")[^\"]*\d+\.\d+\.\d+[^\s,\"]*/)[0]
+          end
+        end
+      end
+      package_version
+    end
+
+    def system_pagination(options={})
+      render partial: "railsui/shared/pagination", locals: options
+    end
+  end
+end

data/app/helpers/railsui/mail_helper.rb

@@ -0,0 +1,18 @@
+module Railsui
+  module MailHelper
+    def spacer(amount = 16)
+      render "rui/shared/email_spacer", amount: amount
+    end
+
+    def email_action(action, url, options={})
+      align = options[:align] ||= "left"
+      theme = options[:theme] ||= "primary"
+      fullwidth = options[:fullwidth] ||= false
+      render "rui/shared/email_action", align: align, theme: theme, action: action, url: url, fullwidth: fullwidth
+    end
+
+    def email_callout(&block)
+      render "rui/shared/email_callout", block: block
+    end
+  end
+end

data/app/javascript/application.js

@@ -0,0 +1 @@
+import "./controllers"

data/app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus = application
+
+export { application }

data/app/javascript/controllers/index.js

@@ -0,0 +1,80 @@
+import { application } from "./application"
+
+import RailsuiAnchorController from "./railsui_anchor_controller.js"
+application.register("railsui-anchor", RailsuiAnchorController)
+
+import RailsuiConfigurationController from "./railsui_configuration_controller.js"
+application.register("railsui-configuration", RailsuiConfigurationController)
+
+import RailsuiCodeController from "./railsui_code_controller.js"
+application.register("railsui-code", RailsuiCodeController)
+
+import RailsuiCanvasController from "./railsui_canvas_controller.js"
+application.register("railsui-canvas", RailsuiCanvasController)
+
+import RailsuiDialogController from "./railsui_dialog_controller.js"
+application.register("railsui-dialog", RailsuiDialogController)
+
+import RailsuiFlashController from "./railsui_flash_controller.js"
+application.register("railsui-flash", RailsuiFlashController)
+
+import RailsuiHelperController from "./railsui_helper_controller.js"
+application.register("railsui-helper", RailsuiHelperController)
+
+import RailsuiNavController from "./railsui_nav_controller.js"
+application.register("railsui-nav", RailsuiNavController)
+
+import RailsuiPreventController from "./railsui_prevent_controller.js"
+application.register("railsui-prevent", RailsuiPreventController)
+
+import RailsuiScrollController from "./railsui_scroll_controller.js"
+application.register("railsui-scroll", RailsuiScrollController)
+
+import RailsuiScrollSpyController from "./railsui_scroll_spy_controller.js"
+application.register("railsui-scroll-spy", RailsuiScrollSpyController)
+
+import RailsuiSearchController from "./railsui_search_controller.js"
+application.register("railsui-search", RailsuiSearchController)
+
+import RailsuiSmoothController from "./railsui_smooth_controller.js"
+application.register("railsui-smooth", RailsuiSmoothController)
+
+import RailsuiSnippetController from "./railsui_snippet_controller.js"
+application.register("railsui-snippet", RailsuiSnippetController)
+
+import RailsuiPagesController from "./railsui_pages_controller.js"
+application.register("railsui-pages", RailsuiPagesController)
+
+import RailsuiLoadingController from "./railsui_loading_controller.js"
+application.register("railsui-loading", RailsuiLoadingController)
+
+// Import components adhoc.
+import {
+  RailsuiClipboard,
+  RailsuiCountUp,
+  RailsuiCombobox,
+  RailsuiDateRangePicker,
+  RailsuiDropdown,
+  RailsuiModal,
+  RailsuiRange,
+  RailsuiReadMore,
+  RailsuiSelectAll,
+  RailsuiTabs,
+  RailsuiToast,
+  RailsuiToggle,
+  RailsuiTooltip,
+} from "railsui-stimulus"
+
+application.register("railsui-clipboard", RailsuiClipboard)
+application.register("railsui-count-up", RailsuiCountUp)
+application.register("railsui-combobox", RailsuiCombobox)
+application.register("railsui-date-range-picker", RailsuiDateRangePicker)
+application.register("railsui-dropdown", RailsuiDropdown)
+application.register("railsui-modal", RailsuiModal)
+application.register("railsui-range", RailsuiRange)
+application.register("railsui-read-more", RailsuiReadMore)
+application.register("railsui-select-all", RailsuiSelectAll)
+application.register("railsui-tabs", RailsuiTabs)
+application.register("railsui-toast", RailsuiToast)
+application.register("railsui-toggle", RailsuiToggle)
+application.register("railsui-tooltip", RailsuiTooltip)

data/app/javascript/controllers/railsui_anchor_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from '@hotwired/stimulus'
+import tippy from 'tippy.js'
+
+export default class extends Controller {
+  static values = {
+    url: String,
+  }
+
+  copy(event) {
+    event.preventDefault()
+    navigator.clipboard.writeText(this.urlValue + `#${this.element.id}`)
+  }
+}

data/app/javascript/controllers/railsui_auto_expand_text_area_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  expand() {
+    this.element.style.height = `${this.element.scrollHeight + 2}px`
+
+    if (this.element.scrollHeight > 60) {
+      this.element.classList.remove("rounded-full")
+      this.element.classList.add("rounded-lg")
+    } else {
+      this.resetTextarea()
+    }
+
+    if (this.element.value.trim() === "") {
+      this.resetTextarea()
+    }
+  }
+
+  resetTextarea() {
+    this.element.style.height = "auto"
+    this.element.classList.add("rounded-full")
+    this.element.classList.remove("rounded-lg")
+  }
+}

data/app/javascript/controllers/railsui_canvas_controller.js

@@ -0,0 +1,164 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    if (this.element) {
+      var c = this.element,
+        ctx = c.getContext("2d"),
+        cw = (c.width = window.innerWidth),
+        ch = (c.height = window.innerHeight),
+        points = [],
+        tick = 0,
+        opt = {
+          count: 5,
+          range: {
+            x: 40,
+            y: 80,
+          },
+          duration: {
+            min: 40,
+            max: 100,
+          },
+          thickness: 0,
+          strokeColor: "transparent",
+          level: 0.65,
+          curved: true,
+        },
+        rand = function (min, max) {
+          return Math.floor(Math.random() * (max - min + 1) + min)
+        },
+        ease = function (t, b, c, d) {
+          if ((t /= d / 2) < 1) return (c / 2) * t * t + b
+          return (-c / 2) * (--t * (t - 2) - 1) + b
+        }
+
+      ctx.lineJoin = "round"
+
+      ctx.lineWidth = opt.thickness
+
+      ctx.strokeStyle = opt.strokeColor
+
+      var Point = function (config) {
+        this.anchorX = config.x
+        this.anchorY = config.y
+        this.x = config.x
+        this.y = config.y
+        this.setTarget()
+      }
+
+      Point.prototype.setTarget = function () {
+        this.initialX = this.x
+        this.initialY = this.y
+        this.targetX = this.anchorX + rand(0, opt.range.x * 2) - opt.range.x
+        this.targetY = this.anchorY + rand(0, opt.range.y * 2) - opt.range.y
+        this.tick = 0
+        this.duration = rand(opt.duration.min, opt.duration.max)
+      }
+
+      Point.prototype.update = function () {
+        var dx = this.targetX - this.x
+        var dy = this.targetY - this.y
+        var dist = Math.sqrt(dx * dx + dy * dy)
+        if (Math.abs(dist) <= 0) {
+          this.setTarget()
+        } else {
+          var t = this.tick
+          var b = this.initialY
+          var c = this.targetY - this.initialY
+          var d = this.duration
+          this.y = ease(t, b, c, d)
+          b = this.initialX
+          c = this.targetX - this.initialX
+          d = this.duration
+          this.x = ease(t, b, c, d)
+          this.tick++
+        }
+      }
+      Point.prototype.render = function () {
+        ctx.beginPath()
+        ctx.arc(this.x, this.y, 3, 0, Math.PI * 2, false)
+        ctx.fillStyle = "#000"
+        ctx.fill()
+      }
+
+      var updatePoints = function () {
+        var i = points.length
+        while (i--) {
+          points[i].update()
+        }
+      }
+      var renderPoints = function () {
+        var i = points.length
+        while (i--) {
+          points[i].render()
+        }
+      }
+
+      var renderShape = function () {
+        ctx.beginPath()
+        var pointCount = points.length
+        ctx.moveTo(points[0].x, points[0].y)
+        var i
+        for (i = 0; i < pointCount - 1; i++) {
+          var c = (points[i].x + points[i + 1].x) / 2
+          var d = (points[i].y + points[i + 1].y) / 2
+          ctx.quadraticCurveTo(points[i].x, points[i].y, c, d)
+        }
+        ctx.lineTo(-opt.range.x - opt.thickness, ch + opt.thickness)
+
+        ctx.lineTo(cw + opt.range.x + opt.thickness, ch + opt.thickness)
+
+        ctx.closePath()
+
+        var gradient = ctx.createLinearGradient(20, 300, 240, 0)
+
+        gradient.addColorStop(1, "#27272a")
+        gradient.addColorStop(0.05, "#18181b")
+
+        ctx.fillStyle = gradient
+
+        ctx.fill()
+
+        ctx.stroke()
+      }
+
+      var clear = function () {
+        ctx.clearRect(0, 0, cw, ch)
+      }
+
+      var loop = function () {
+        window.requestAnimFrame(loop, c)
+        tick++
+        clear()
+        updatePoints()
+        renderShape()
+      }
+      var i = opt.count + 2
+      var spacing = (cw + opt.range.x * 2) / (opt.count - 1)
+
+      while (i--) {
+        points.push(
+          new Point({
+            x: spacing * (i - 1) - opt.range.x,
+            y: ch - ch * opt.level,
+          })
+        )
+      }
+
+      window.requestAnimFrame = (function () {
+        return (
+          window.requestAnimationFrame ||
+          window.webkitRequestAnimationFrame ||
+          window.mozRequestAnimationFrame ||
+          window.oRequestAnimationFrame ||
+          window.msRequestAnimationFrame ||
+          function (a) {
+            window.setTimeout(a, 1e3 / 60)
+          }
+        )
+      })()
+
+      loop()
+    }
+  }
+}

data/app/javascript/controllers/railsui_code_controller.js

@@ -0,0 +1,36 @@
+import hljs from "highlight.js"
+
+import bash from "highlight.js/lib/languages/bash"
+import javascript from "highlight.js/lib/languages/javascript"
+import css from "highlight.js/lib/languages/css"
+import xml from "highlight.js/lib/languages/xml"
+import erb from "highlight.js/lib/languages/erb"
+import haml from "highlight.js/lib/languages/haml"
+import ruby from "highlight.js/lib/languages/ruby"
+import scss from "highlight.js/lib/languages/scss"
+import yaml from "highlight.js/lib/languages/yaml"
+
+hljs.registerLanguage("bash", bash)
+hljs.registerLanguage("css", css)
+hljs.registerLanguage("javascript", javascript)
+hljs.registerLanguage("xml", xml)
+hljs.registerLanguage("erb", erb)
+hljs.registerLanguage("haml", haml)
+hljs.registerLanguage("ruby", ruby)
+hljs.registerLanguage("scss", scss)
+hljs.registerLanguage("yaml", yaml)
+
+hljs.configure({
+  languages: ["bash", "css", "javascript", "xml", "erb", "haml", "ruby", "scss", "yaml"]
+})
+
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["snippet"]
+  connect() {
+    this.snippetTargets.forEach((el) => {
+      hljs.highlightElement(el)
+    })
+  }
+}

data/app/javascript/controllers/railsui_color_controller.js

@@ -0,0 +1,18 @@
+import "vanilla-colorful"
+import "vanilla-colorful/hex-input.js"
+
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["picker"]
+  connect() {
+    this.pickerTargets.forEach((picker) => {
+      picker.addEventListener("color-changed", (event) => {
+        picker.previousElementSibling.value = event.detail.value
+        picker.nextElementSibling.color = event.detail.value
+        picker.color = event.detail.value
+        picker.value = event.detail.value
+      })
+    })
+  }
+}