railsui 3.1.0

data/app/assets/images/themes/shepherd/logo.svg

@@ -0,0 +1 @@
+ <svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M42 0C45.3137 0 48 2.68629 48 6V42C48 45.3137 45.3137 48 42 48H6C2.68629 48 0 45.3137 0 42V6C0 2.68629 2.68629 0 6 0H42ZM21.5033 40.9481C21.7923 40.9918 22.026 40.7078 22.026 40.4156V34.1876C22.026 31.1727 18.7622 29.2883 16.1511 30.7958C15.207 31.3409 13.9997 31.0174 13.4545 30.0732C12.9094 29.1291 13.2329 27.9218 14.1771 27.3767C16.8164 25.8529 16.8164 22.0433 14.1771 20.5195C13.2329 19.9744 12.9094 18.7671 13.4545 17.8229C13.9997 16.8788 15.207 16.5553 16.1511 17.1004C18.7622 18.6079 22.026 16.7235 22.026 13.7085V12.1819C22.026 9.30521 19.4534 7.03474 16.8446 8.24694C10.9466 10.9875 6.85714 16.9642 6.85714 23.8961C6.85714 32.5373 13.2121 39.6941 21.5033 40.9481ZM41.3507 23.8961C41.3507 32.6033 34.8983 39.8034 26.5142 40.9758C26.2134 41.0178 25.974 40.7193 25.974 40.4156V34.0722C25.974 31.0759 29.2176 29.2032 31.8125 30.7013C32.7567 31.2464 33.964 30.9229 34.5091 29.9788C35.0542 29.0346 34.7307 27.8273 33.7865 27.2822C31.2199 25.8004 31.2199 22.0958 33.7865 20.614C34.7307 20.0689 35.0542 18.8616 34.5091 17.9174C33.964 16.9732 32.7567 16.6497 31.8125 17.1949C29.2176 18.693 25.974 16.8203 25.974 13.824V12.1564C25.974 9.26895 28.5381 6.9748 31.1714 8.15925C37.1723 10.8585 41.3507 16.8893 41.3507 23.8961Z" /></svg>

data/app/assets/images/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>twitter</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"></path></svg>

data/app/assets/images/warning.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>warning-triangle</title><g fill="none"><path
+stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.952 16.354l5.263-10.497c.738-1.472 2.839-1.472 3.576 0l5.258 10.497a2 2 0 0 1-1.788 2.896H6.741a2 2 0 0 1-1.789-2.896z"></path><path
+stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v2"></path><circle cx="12" cy="16" r="1" fill="#94a3b8"></circle></g></svg>

data/app/assets/javascripts/railsui.js

@@ -0,0 +1,163 @@
+document.addEventListener("DOMContentLoaded", () => {
+  if (document.getElementById("canvas")) {
+    var c = document.getElementById("canvas"),
+      ctx = c.getContext("2d"),
+      cw = (c.width = window.innerWidth),
+      ch = (c.height = window.innerHeight),
+      points = [],
+      tick = 0,
+      opt = {
+        count: 8,
+        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, "#4338CA")
+      // gradient.addColorStop(0.2, "salmon")
+
+      gradient.addColorStop(1, "#f1f5f9")
+      gradient.addColorStop(0.2, "#f8fafc")
+
+      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/assets/stylesheets/railsui/code.css

@@ -0,0 +1,137 @@
+pre code.hljs {
+  display: block;
+  overflow: auto !important;
+  padding: 1em;
+  font-family: theme("fontFamily.mono");
+  font-size: 15px !important;
+
+  @apply scrollbar-track-neutral-950 scrollbar-thumb-neutral-500;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+.hljs {
+  color: theme("colors.neutral.100");
+}
+.hljs-attr,
+.hljs-tag {
+  color: theme("colors.neutral.100");
+}
+
+.hljs-keyword {
+  color: #c792ea;
+  font-style: italic;
+}
+.hljs-built_in {
+  color: #addb67;
+  font-style: italic;
+}
+.hljs-type {
+  color: #82aaff;
+}
+.hljs-literal {
+  color: #ff5874;
+}
+.hljs-number {
+  color: #f78c6c;
+}
+.hljs-regexp {
+  color: #5ca7e4;
+}
+.hljs-string {
+  color: theme("colors.sky.300");
+}
+.hljs-class {
+  color: #ffcb8b;
+}
+.hljs-function {
+  color: #82aaff;
+}
+.hljs-title {
+  color: #dcdcaa;
+  font-style: italic;
+}
+.hljs-params {
+  color: #7fdbca;
+}
+.hljs-comment {
+  color: #637777;
+  font-style: italic;
+}
+.hljs-doctag {
+  color: #7fdbca;
+}
+.hljs-meta,
+.hljs-meta .hljs-keyword {
+  color: #82aaff;
+}
+.hljs-meta .hljs-string {
+  color: #ecc48d;
+}
+.hljs-section {
+  color: #82b1ff;
+}
+.hljs-selector-tag,
+.hljs-symbol,
+.hljs-subst,
+.hljs-name {
+  color: theme("colors.pink.400");
+}
+.hljs-attribute {
+  color: #80cbc4;
+}
+.hljs-variable {
+  color: theme("colors.teal.400");
+}
+.hljs-bullet {
+  color: #d9f5dd;
+}
+.hljs-code {
+  color: #80cbc4;
+}
+.hljs-emphasis {
+  color: #c792ea;
+  font-style: italic;
+}
+.hljs-strong {
+  color: #addb67;
+  font-weight: 700;
+}
+.hljs-formula {
+  color: #c792ea;
+}
+.hljs-link {
+  color: #ff869a;
+}
+.hljs-quote {
+  color: #697098;
+  font-style: italic;
+}
+.hljs-selector-id {
+  color: #fad430;
+}
+.hljs-selector-class {
+  color: theme("colors.sky.400");
+  font-style: italic;
+}
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #c792ea;
+  font-style: italic;
+}
+.hljs-template-tag {
+  color: #c792ea;
+}
+.hljs-template-variable {
+  color: theme("colors.teal.400");
+}
+.hljs-addition {
+  color: #addb67ff;
+  font-style: italic;
+}
+.hljs-deletion {
+  color: #ef535090;
+  font-style: italic;
+}

data/app/assets/stylesheets/railsui/config.css

@@ -0,0 +1,20 @@
+.railsui .config-loader {
+  opacity: 0;
+  visibility: invisible;
+  z-index: 0;
+  transition: ease-in-out 0.3s all;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: #372aac;
+}
+
+.railsui .config-loader.config-loader--active {
+  visibility: visible;
+  z-index: 40;
+  transition: ease-in-out 0.3s all;
+}

data/app/assets/stylesheets/railsui/docs.css

@@ -0,0 +1,14 @@
+.railsui {
+  [data-controller="anchor"] {
+    @apply relative cursor-pointer;
+  }
+
+  [data-controller="anchor"]::before {
+    content: "#";
+    @apply absolute transition text-neutral-400 font-mono font-semibold text-xl -left-4 top-0 opacity-0 duration-300;
+  }
+
+  [data-controller="anchor"]:hover::before {
+    @apply opacity-100;
+  }
+}

data/app/assets/stylesheets/railsui/forms.css

@@ -0,0 +1,52 @@
+.railsui {
+  .rui-form-input {
+    @apply 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;
+  }
+
+  .rui-form-label {
+    @apply block mb-2 font-medium text-[14px] dark:text-white;
+  }
+
+  .rui-form-input-switch {
+    @apply hidden;
+
+    &:disabled + label {
+      @apply opacity-70 cursor-not-allowed;
+    }
+
+    &:disabled + label::after {
+      @apply !shadow-none;
+    }
+
+    &:checked + label::before {
+      @apply bg-primary-500;
+    }
+
+    &:checked + label::after {
+      transform: translate3d(16px, 0, 0);
+      background-size: 10px 10px;
+      @apply bg-no-repeat bg-center bg-white dark:bg-zinc-200;
+    }
+
+    + label {
+      @apply inline-flex cursor-pointer text-base leading-6 select-none relative font-sans;
+
+      &:before {
+        @apply content-[""] block bg-zinc-300 rounded-full h-6 w-10 mr-2 transition-colors ease-out flex-shrink-0 dark:bg-zinc-600;
+      }
+
+      &:after {
+        @apply content-[""] block bg-white rounded-full size-4 absolute top-[4px] left-[4px] transition-transform ease-out shadow-sm;
+      }
+    }
+  }
+
+  .rui-form-input-color {
+    @apply appearance-none w-8 h-8 border border-neutral-200 focus:border-neutral-400 focus:shadow rounded-md transition focus:ring-4 focus:ring-neutral-500/10 dark:border-neutral-600;
+
+    &::-webkit-color-swatch-wrapper,
+    &::-webkit-color-swatch {
+      @apply p-0 rounded border-2 border-white dark:border-neutral-700;
+    }
+  }
+}

data/app/assets/stylesheets/railsui/nav.css

@@ -0,0 +1,28 @@
+.railsui {
+  [x-cloak] {
+    display: none;
+  }
+
+  .rui-primary-nav {
+    @apply relative;
+  }
+
+  /* Overrides nav_link_to helper */
+  .rui-primary-nav ul li a.nav-link-active,
+  .rui-primary-nav ul li a:hover {
+    @apply text-neutral-800 border-r-2 border-neutral-200/80 dark:border-amber-300 dark:text-neutral-200 !important;
+  }
+
+  .rui-primary-nav ul li a.nav-link-active:after {
+    content: "";
+    background: none;
+  }
+
+  .rui-primary-nav ul li a:hover {
+    @apply dark:bg-neutral-800;
+  }
+
+  .rui-primary-nav ul li a.nav-link-active {
+    @apply font-semibold bg-indigo-50 dark:bg-neutral-800 dark:text-white;
+  }
+}

data/app/assets/stylesheets/railsui/overrides.css

@@ -0,0 +1,5 @@
+.railsui {
+  .collapse {
+    visibility: visible !important;
+  }
+}