relay_ui 0.1.1 → 0.2.3

data/dist/relay_ui/relay_ui.css

@@ -0,0 +1,595 @@
+/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
+:root, :host {
+  --rui-font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --rui-color-red-100: oklch(0.936 0.032 17.717);
+  --rui-color-red-700: oklch(0.505 0.213 27.518);
+  --rui-color-red-900: oklch(0.396 0.141 25.723);
+  --rui-color-yellow-100: oklch(0.973 0.071 103.193);
+  --rui-color-yellow-700: oklch(0.554 0.135 66.442);
+  --rui-color-green-100: oklch(0.962 0.044 156.743);
+  --rui-color-green-700: oklch(0.527 0.154 150.069);
+  --rui-color-blue-100: oklch(0.932 0.032 255.585);
+  --rui-color-blue-700: oklch(0.488 0.243 264.376);
+  --rui-color-blue-900: oklch(0.379 0.146 265.522);
+  --rui-color-purple-100: oklch(0.946 0.033 307.174);
+  --rui-color-purple-700: oklch(0.496 0.265 301.924);
+  --rui-color-gray-100: oklch(0.967 0.003 264.542);
+  --rui-color-gray-700: oklch(0.373 0.034 259.733);
+  --rui-color-zinc-100: oklch(0.967 0.001 286.375);
+  --rui-color-zinc-200: oklch(0.92 0.004 286.32);
+  --rui-color-zinc-300: oklch(0.871 0.006 286.286);
+  --rui-color-zinc-400: oklch(0.705 0.015 286.067);
+  --rui-color-zinc-700: oklch(0.37 0.013 285.805);
+  --rui-color-zinc-900: oklch(0.21 0.006 285.885);
+  --rui-color-black: #000;
+  --rui-color-white: #fff;
+  --rui-spacing: 0.25rem;
+  --rui-text-xs: 0.75rem;
+  --rui-text-xs--line-height: calc(1 / 0.75);
+  --rui-text-sm: 0.875rem;
+  --rui-text-sm--line-height: calc(1.25 / 0.875);
+  --rui-text-base: 1rem;
+  --rui-text-base--line-height: calc(1.5 / 1);
+  --rui-text-lg: 1.125rem;
+  --rui-text-lg--line-height: calc(1.75 / 1.125);
+  --rui-text-xl: 1.25rem;
+  --rui-text-xl--line-height: calc(1.75 / 1.25);
+  --rui-text-2xl: 1.5rem;
+  --rui-text-2xl--line-height: calc(2 / 1.5);
+  --rui-text-3xl: 1.875rem;
+  --rui-text-3xl--line-height: calc(2.25 / 1.875);
+  --rui-text-4xl: 2.25rem;
+  --rui-text-4xl--line-height: calc(2.5 / 2.25);
+  --rui-font-weight-semibold: 600;
+  --rui-radius-sm: 0.25rem;
+  --rui-radius-lg: 0.5rem;
+  --rui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --rui-default-transition-duration: 150ms;
+  --rui-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+.rui\:pointer-events-auto {
+  pointer-events: auto;
+}
+.rui\:pointer-events-none {
+  pointer-events: none;
+}
+.rui\:absolute {
+  position: absolute;
+}
+.rui\:fixed {
+  position: fixed;
+}
+.rui\:sticky {
+  position: sticky;
+}
+.rui\:inset-0 {
+  inset: calc(var(--rui-spacing) * 0);
+}
+.rui\:inset-y-0 {
+  inset-block: calc(var(--rui-spacing) * 0);
+}
+.rui\:top-0 {
+  top: calc(var(--rui-spacing) * 0);
+}
+.rui\:right-0 {
+  right: calc(var(--rui-spacing) * 0);
+}
+.rui\:z-50 {
+  z-index: 50;
+}
+.rui\:mx-10 {
+  margin-inline: calc(var(--rui-spacing) * 10);
+}
+.rui\:my-1 {
+  margin-block: calc(var(--rui-spacing) * 1);
+}
+.rui\:mt-6 {
+  margin-top: calc(var(--rui-spacing) * 6);
+}
+.rui\:mb-4 {
+  margin-bottom: calc(var(--rui-spacing) * 4);
+}
+.rui\:flex {
+  display: flex;
+}
+.rui\:inline-block {
+  display: inline-block;
+}
+.rui\:inline-flex {
+  display: inline-flex;
+}
+.rui\:size-4 {
+  width: calc(var(--rui-spacing) * 4);
+  height: calc(var(--rui-spacing) * 4);
+}
+.rui\:h-full {
+  height: 100%;
+}
+.rui\:h-screen {
+  height: 100vh;
+}
+.rui\:max-h-screen {
+  max-height: 100vh;
+}
+.rui\:w-full {
+  width: 100%;
+}
+.rui\:w-screen {
+  width: 100vw;
+}
+.rui\:max-w-1\/2 {
+  max-width: calc(1/2 * 100%);
+}
+.rui\:-translate-x-0 {
+  --tw-translate-x: calc(var(--rui-spacing) * -0);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+.rui\:translate-x-full {
+  --tw-translate-x: 100%;
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+.rui\:cursor-default {
+  cursor: default;
+}
+.rui\:flex-col {
+  flex-direction: column;
+}
+.rui\:flex-row {
+  flex-direction: row;
+}
+.rui\:items-center {
+  align-items: center;
+}
+.rui\:gap-2 {
+  gap: calc(var(--rui-spacing) * 2);
+}
+.rui\:overflow-y-auto {
+  overflow-y: auto;
+}
+.rui\:overflow-y-hidden {
+  overflow-y: hidden;
+}
+.rui\:rounded {
+  border-radius: 0.25rem;
+}
+.rui\:rounded-full {
+  border-radius: calc(infinity * 1px);
+}
+.rui\:border {
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+}
+.rui\:border-t {
+  border-top-style: var(--tw-border-style);
+  border-top-width: 1px;
+}
+.rui\:border-l-3 {
+  border-left-style: var(--tw-border-style);
+  border-left-width: 3px;
+}
+.rui\:border-blue-700 {
+  border-color: var(--rui-color-blue-700);
+}
+.rui\:border-transparent {
+  border-color: transparent;
+}
+.rui\:border-zinc-200 {
+  border-color: var(--rui-color-zinc-200);
+}
+.rui\:border-zinc-700 {
+  border-color: var(--rui-color-zinc-700);
+}
+.rui\:bg-black {
+  background-color: var(--rui-color-black);
+}
+.rui\:bg-blue-100 {
+  background-color: var(--rui-color-blue-100);
+}
+.rui\:bg-blue-700 {
+  background-color: var(--rui-color-blue-700);
+}
+.rui\:bg-gray-100 {
+  background-color: var(--rui-color-gray-100);
+}
+.rui\:bg-green-100 {
+  background-color: var(--rui-color-green-100);
+}
+.rui\:bg-purple-100 {
+  background-color: var(--rui-color-purple-100);
+}
+.rui\:bg-red-100 {
+  background-color: var(--rui-color-red-100);
+}
+.rui\:bg-red-700 {
+  background-color: var(--rui-color-red-700);
+}
+.rui\:bg-white {
+  background-color: var(--rui-color-white);
+}
+.rui\:bg-yellow-100 {
+  background-color: var(--rui-color-yellow-100);
+}
+.rui\:bg-zinc-700 {
+  background-color: var(--rui-color-zinc-700);
+}
+.rui\:px-3 {
+  padding-inline: calc(var(--rui-spacing) * 3);
+}
+.rui\:px-5 {
+  padding-inline: calc(var(--rui-spacing) * 5);
+}
+.rui\:py-0\.5 {
+  padding-block: calc(var(--rui-spacing) * 0.5);
+}
+.rui\:py-1 {
+  padding-block: calc(var(--rui-spacing) * 1);
+}
+.rui\:py-10 {
+  padding-block: calc(var(--rui-spacing) * 10);
+}
+.rui\:pt-8 {
+  padding-top: calc(var(--rui-spacing) * 8);
+}
+.rui\:pb-4 {
+  padding-bottom: calc(var(--rui-spacing) * 4);
+}
+.rui\:text-base {
+  font-size: var(--rui-text-base);
+  line-height: var(--tw-leading, var(--rui-text-base--line-height));
+}
+.rui\:text-lg {
+  font-size: var(--rui-text-lg);
+  line-height: var(--tw-leading, var(--rui-text-lg--line-height));
+}
+.rui\:text-sm {
+  font-size: var(--rui-text-sm);
+  line-height: var(--tw-leading, var(--rui-text-sm--line-height));
+}
+.rui\:text-xs {
+  font-size: var(--rui-text-xs);
+  line-height: var(--tw-leading, var(--rui-text-xs--line-height));
+}
+.rui\:font-semibold {
+  --tw-font-weight: var(--rui-font-weight-semibold);
+  font-weight: var(--rui-font-weight-semibold);
+}
+.rui\:text-blue-700 {
+  color: var(--rui-color-blue-700);
+}
+.rui\:text-gray-700 {
+  color: var(--rui-color-gray-700);
+}
+.rui\:text-green-700 {
+  color: var(--rui-color-green-700);
+}
+.rui\:text-purple-700 {
+  color: var(--rui-color-purple-700);
+}
+.rui\:text-red-700 {
+  color: var(--rui-color-red-700);
+}
+.rui\:text-white {
+  color: var(--rui-color-white);
+}
+.rui\:text-yellow-700 {
+  color: var(--rui-color-yellow-700);
+}
+.rui\:text-zinc-400 {
+  color: var(--rui-color-zinc-400);
+}
+.rui\:text-zinc-700 {
+  color: var(--rui-color-zinc-700);
+}
+.rui\:uppercase {
+  text-transform: uppercase;
+}
+.rui\:opacity-75 {
+  opacity: 75%;
+}
+.rui\:shadow {
+  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.rui\:transition {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-timing-function: var(--tw-ease, var(--rui-default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--rui-default-transition-duration));
+}
+.rui\:transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: var(--tw-ease, var(--rui-default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--rui-default-transition-duration));
+}
+.rui\:duration-100 {
+  --tw-duration: 100ms;
+  transition-duration: 100ms;
+}
+.rui\:duration-200 {
+  --tw-duration: 200ms;
+  transition-duration: 200ms;
+}
+.rui\:ease-in-out {
+  --tw-ease: var(--rui-ease-in-out);
+  transition-timing-function: var(--rui-ease-in-out);
+}
+.rui\:hover\:cursor-pointer {
+  &:hover {
+    @media (hover: hover) {
+      cursor: pointer;
+    }
+  }
+}
+.rui\:hover\:border-zinc-200 {
+  &:hover {
+    @media (hover: hover) {
+      border-color: var(--rui-color-zinc-200);
+    }
+  }
+}
+.rui\:hover\:border-zinc-900 {
+  &:hover {
+    @media (hover: hover) {
+      border-color: var(--rui-color-zinc-900);
+    }
+  }
+}
+.rui\:hover\:bg-blue-900 {
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--rui-color-blue-900);
+    }
+  }
+}
+.rui\:hover\:bg-red-900 {
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--rui-color-red-900);
+    }
+  }
+}
+.rui\:hover\:bg-zinc-100 {
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--rui-color-zinc-100);
+    }
+  }
+}
+.rui\:hover\:bg-zinc-900 {
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--rui-color-zinc-900);
+    }
+  }
+}
+.rui\:hover\:text-zinc-700 {
+  &:hover {
+    @media (hover: hover) {
+      color: var(--rui-color-zinc-700);
+    }
+  }
+}
+.rui\:hover\:text-zinc-900 {
+  &:hover {
+    @media (hover: hover) {
+      color: var(--rui-color-zinc-900);
+    }
+  }
+}
+.rui\:\*\*\:\[svg\]\:stroke-blue-700 {
+  :is(& *) {
+    &:is(svg) {
+      stroke: var(--rui-color-blue-700);
+    }
+  }
+}
+.rui\:\*\*\:\[svg\]\:stroke-zinc-300 {
+  :is(& *) {
+    &:is(svg) {
+      stroke: var(--rui-color-zinc-300);
+    }
+  }
+}
+.rui\:hover\:\*\*\:\[svg\]\:stroke-zinc-700 {
+  &:hover {
+    @media (hover: hover) {
+      :is(& *) {
+        &:is(svg) {
+          stroke: var(--rui-color-zinc-700);
+        }
+      }
+    }
+  }
+}
+.rui\:markdown {
+  font-family: var(--rui-font-sans);
+  color: var(--rui-color-zinc-700);
+}
+.rui\:markdown h1, .rui\:markdown h2, .rui\:markdown h3, .rui\:markdown h4, .rui\:markdown h5, .rui\:markdown h6 {
+  margin-top: calc(var(--rui-spacing) * 6);
+  margin-bottom: calc(var(--rui-spacing) * 4);
+  --tw-font-weight: var(--rui-font-weight-semibold);
+  font-weight: var(--rui-font-weight-semibold);
+}
+.rui\:markdown h1 {
+  font-size: var(--rui-text-4xl);
+  line-height: var(--tw-leading, var(--rui-text-4xl--line-height));
+}
+.rui\:markdown h2 {
+  font-size: var(--rui-text-3xl);
+  line-height: var(--tw-leading, var(--rui-text-3xl--line-height));
+}
+.rui\:markdown h3 {
+  font-size: var(--rui-text-2xl);
+  line-height: var(--tw-leading, var(--rui-text-2xl--line-height));
+}
+.rui\:markdown h4 {
+  font-size: var(--rui-text-xl);
+  line-height: var(--tw-leading, var(--rui-text-xl--line-height));
+}
+.rui\:markdown h5 {
+  font-size: var(--rui-text-lg);
+  line-height: var(--tw-leading, var(--rui-text-lg--line-height));
+}
+.rui\:markdown h6 {
+  font-size: var(--rui-text-base);
+  line-height: var(--tw-leading, var(--rui-text-base--line-height));
+}
+.rui\:markdown p {
+  margin-bottom: calc(var(--rui-spacing) * 4);
+}
+.rui\:markdown a {
+  color: var(--rui-color-blue-700);
+  text-decoration-line: none;
+}
+.rui\:markdown a:hover {
+  text-decoration-line: underline;
+}
+.rui\:markdown ul {
+  margin-bottom: calc(var(--rui-spacing) * 4);
+  list-style-type: disc;
+  padding-left: calc(var(--rui-spacing) * 8);
+}
+.rui\:markdown ol {
+  margin-bottom: calc(var(--rui-spacing) * 4);
+  list-style-type: decimal;
+  padding-left: calc(var(--rui-spacing) * 8);
+}
+.rui\:markdown code {
+  border-radius: var(--rui-radius-sm);
+  background-color: var(--rui-color-zinc-200);
+  padding-inline: calc(var(--rui-spacing) * 2);
+  padding-block: calc(var(--rui-spacing) * 0.5);
+  white-space: break-spaces;
+}
+.rui\:markdown>div.highlight>pre.codehilite {
+  margin-bottom: calc(var(--rui-spacing) * 4);
+  border-radius: var(--rui-radius-lg);
+  background-color: var(--rui-color-black);
+  padding: calc(var(--rui-spacing) * 6);
+}
+.rui\:markdown>div.highlight>pre.codehilite>code {
+  border-radius: 0;
+  background-color: transparent;
+  padding: calc(var(--rui-spacing) * 0);
+  color: var(--rui-color-zinc-300);
+}
+.rui\:markdown blockquote {
+  margin-bottom: calc(var(--rui-spacing) * 4);
+  border-left-style: var(--tw-border-style);
+  border-left-width: 4px;
+  border-color: var(--rui-color-zinc-300);
+  padding-left: calc(var(--rui-spacing) * 4);
+}
+.rui\:markdown hr {
+  margin-block: calc(var(--rui-spacing) * 6);
+  border-style: var(--tw-border-style);
+  border-width: 0px;
+  border-top-style: var(--tw-border-style);
+  border-top-width: 1px;
+  border-color: var(--rui-color-zinc-300);
+}
+.rui\:markdown table {
+  margin-bottom: calc(var(--rui-spacing) * 4);
+  width: 100%;
+  border-collapse: collapse;
+}
+.rui\:markdown th, .rui\:markdown td {
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--rui-color-zinc-300);
+  padding-inline: calc(var(--rui-spacing) * 4);
+  padding-block: calc(var(--rui-spacing) * 2);
+  text-align: left;
+}
+.rui\:markdown th {
+  --tw-font-weight: var(--rui-font-weight-semibold);
+  font-weight: var(--rui-font-weight-semibold);
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}

data/lib/relay_ui/engine.rb

@@ -1,19 +1,18 @@
 # frozen_string_literal: true
 
-module RelayUi
+module RUI
   class Engine < ::Rails::Engine
-    isolate_namespace RelayUi
+    isolate_namespace RUI
 
     initializer "relay_ui.assets.precompile" do |app|
-      app.config.assets.paths << root.join("vendor", "assets", "stylesheets")
-      app.config.assets.paths << root.join("vendor", "assets", "javascripts")
+      app.config.assets.paths << root.join("dist")
     end
 
     initializer "relay_ui.autoload.components" do
       Rails.autoloaders.main.push_dir(
-        "#{Gem::Specification.find_by_name('relay_ui').gem_dir}/app/components",
-        namespace: RelayUi
+        "#{Gem::Specification.find_by_name('relay_ui').gem_dir}/lib/rui",
+        namespace: RUI
       )
     end
   end
-end
+end

data/lib/relay_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
-module RelayUi
-  VERSION = "0.1.1"
+module RUI
+  VERSION = "0.2.3"
 end

data/lib/relay_ui.rb

@@ -3,7 +3,7 @@
 require_relative "relay_ui/version"
 require_relative "relay_ui/engine"
 
-module RelayUi
+module RUI
   class Error < StandardError; end
   # Your code goes here...
 end

data/lib/rui/badges/base.rb

@@ -0,0 +1,5 @@
+class RUI::Badges::Base < RUI::Base
+  def view_template
+    span(class: "rui:px-3 rui:py-0.5 rui:text-xs rui:rounded-full #{variant_classes}") { yield }
+  end
+end

data/lib/rui/badges/blue.rb

@@ -0,0 +1,5 @@
+class RUI::Badges::Blue < RUI::Badges::Base
+  private
+
+  def variant_classes = "rui:bg-blue-100 rui:text-blue-700"
+end

data/lib/rui/badges/gray.rb

@@ -0,0 +1,5 @@
+class RUI::Badges::Gray < RUI::Badges::Base
+  private
+
+  def variant_classes = "rui:bg-gray-100 rui:text-gray-700"
+end

data/lib/rui/badges/green.rb

@@ -0,0 +1,5 @@
+class RUI::Badges::Green < RUI::Badges::Base
+  private
+
+  def variant_classes = "rui:bg-green-100 rui:text-green-700"
+end

data/lib/rui/badges/purple.rb

@@ -0,0 +1,5 @@
+class RUI::Badges::Purple < RUI::Badges::Base
+  private
+
+  def variant_classes = "rui:bg-purple-100 rui:text-purple-700"
+end

data/lib/rui/badges/red.rb

@@ -0,0 +1,5 @@
+class RUI::Badges::Red < RUI::Badges::Base
+  private
+
+  def variant_classes = "rui:bg-red-100 rui:text-red-700"
+end

data/lib/rui/badges/yellow.rb

@@ -0,0 +1,5 @@
+class RUI::Badges::Yellow < RUI::Badges::Base
+  private
+
+  def variant_classes = "rui:bg-yellow-100 rui:text-yellow-700"
+end

data/{app/components → lib/rui}/base.rb

@@ -1,11 +1,9 @@
 # frozen_string_literal: true
 
-class RelayUi::Base < Phlex::HTML
+class RUI::Base < Phlex::HTML
   include Components
   include Phlex::Rails::Helpers::Routes
 
-  register_value_helper :request
-
   if Rails.env.development?
     def before_template
       comment { "Before #{self.class.name}" }