lightning_ui_kit 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f3aec70474a1fdfbb39d4605b92a5eba8e2a3fb1d616124d8503fdab90edc4ca
-  data.tar.gz: 50dbd4529fb5d4fe31831f0bc690875dd5f84e6b762add80497a7041df691859
+  metadata.gz: 7431b1a812f4483624e661e366110a3cc7af9fd12b4e2873fb4b6d656cf4be7e
+  data.tar.gz: 46ab39a97ff029efd41cb79922a1978142482ad664d633121828b923391d0ebb
 SHA512:
-  metadata.gz: 0da5e876a990252a12c5b960791ac464a3329e34c667d2bf22f30e3936f121495003d668771541d1dc3df6ce3992d094934fdd6b7ff45175135d4c81a30e12b5
-  data.tar.gz: 76e77ec4ac9b05e5b05f8dc6234584ca01fecd34e9bbfcd493f526bd04a585d1ffba91062acc33ffa5c2d8bcabfbd47e041237a760df2ce90499fe01d6757194
+  metadata.gz: 011ab820f18e2d3ee9dcc9e948abdaf007c23991de85994a61264a59fc66f6705445a81f5835b192d429620bf6348ea2e460337034c4bda4071c73466984c127
+  data.tar.gz: 84ba84cdaa5919f9c89daf627a852cb76be8faa3962180db4766853096d718e25e30a7902bd14394b3d7efc7b454c21dc4e97776a6ad164dad40d9347356ac4d

data/README.md

@@ -1,11 +1,14 @@
 # LightningUiKit
 UI components for fast prototyping in Rails applications.
 
+Preview is available at [ui.lightningrails.xyz](https://ui.lightningrails.xyz)
+
 ## Usage
 
 Add this line to your application's Gemfile:
 
 ```ruby
+gem "propshaft"
 gem "lightning_ui_kit"
 ```
 

data/app/assets/builds/lightning_ui_kit.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -34,6 +34,7 @@
     --lui-color-black: #000;
     --lui-color-white: #fff;
     --lui-spacing: 0.25rem;
+    --lui-container-xs: 20rem;
     --lui-container-3xl: 48rem;
     --lui-text-xs: 0.75rem;
     --lui-text-xs--line-height: calc(1 / 0.75);
@@ -239,6 +240,9 @@
   .lui\:right-0 {
     right: calc(var(--lui-spacing) * 0);
   }
+  .lui\:bottom-5 {
+    bottom: calc(var(--lui-spacing) * 5);
+  }
   .lui\:bottom-full {
     bottom: 100%;
   }
@@ -254,6 +258,12 @@
   .lui\:row-start-2 {
     grid-row-start: 2;
   }
+  .lui\:-mx-1\.5 {
+    margin-inline: calc(var(--lui-spacing) * -1.5);
+  }
+  .lui\:-my-1\.5 {
+    margin-block: calc(var(--lui-spacing) * -1.5);
+  }
   .lui\:my-4 {
     margin-block: calc(var(--lui-spacing) * 4);
   }
@@ -287,6 +297,12 @@
   .lui\:ml-2 {
     margin-left: calc(var(--lui-spacing) * 2);
   }
+  .lui\:ml-3 {
+    margin-left: calc(var(--lui-spacing) * 3);
+  }
+  .lui\:ml-auto {
+    margin-left: auto;
+  }
   .lui\:block {
     display: block;
   }
@@ -357,6 +373,9 @@
   .lui\:h-6 {
     height: calc(var(--lui-spacing) * 6);
   }
+  .lui\:h-8 {
+    height: calc(var(--lui-spacing) * 8);
+  }
   .lui\:h-10 {
     height: calc(var(--lui-spacing) * 10);
   }
@@ -372,6 +391,9 @@
   .lui\:w-2\.5 {
     width: calc(var(--lui-spacing) * 2.5);
   }
+  .lui\:w-3 {
+    width: calc(var(--lui-spacing) * 3);
+  }
   .lui\:w-4 {
     width: calc(var(--lui-spacing) * 4);
   }
@@ -381,6 +403,9 @@
   .lui\:w-6 {
     width: calc(var(--lui-spacing) * 6);
   }
+  .lui\:w-8 {
+    width: calc(var(--lui-spacing) * 8);
+  }
   .lui\:w-10 {
     width: calc(var(--lui-spacing) * 10);
   }
@@ -399,6 +424,9 @@
   .lui\:w-screen {
     width: 100vw;
   }
+  .lui\:max-w-xs {
+    max-width: var(--lui-container-xs);
+  }
   .lui\:min-w-0 {
     min-width: calc(var(--lui-spacing) * 0);
   }
@@ -421,11 +449,23 @@
     --tw-translate-x: calc(var(--lui-spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .lui\:scale-95 {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .lui\:scale-100 {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
   .lui\:rotate-180 {
     rotate: 180deg;
   }
   .lui\:transform {
-    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
   .lui\:animate-pulse {
     animation: var(--lui-animate-pulse);
@@ -720,6 +760,9 @@
   .lui\:p-1 {
     padding: calc(var(--lui-spacing) * 1);
   }
+  .lui\:p-1\.5 {
+    padding: calc(var(--lui-spacing) * 1.5);
+  }
   .lui\:p-4 {
     padding: calc(var(--lui-spacing) * 4);
   }
@@ -895,6 +938,10 @@
   .lui\:opacity-100 {
     opacity: 100%;
   }
+  .lui\: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);
+  }
   .lui\:shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px 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);
@@ -933,7 +980,7 @@
     }
   }
   .lui\: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-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, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--lui-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--lui-default-transition-duration));
   }
@@ -950,6 +997,10 @@
     --tw-duration: 100ms;
     transition-duration: 100ms;
   }
+  .lui\:duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .lui\:duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -1518,6 +1569,13 @@
       }
     }
   }
+  .lui\:hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--lui-color-gray-100);
+      }
+    }
+  }
   .lui\:hover\:bg-red-600 {
     &:hover {
       @media (hover: hover) {
@@ -1607,6 +1665,20 @@
       }
     }
   }
+  .lui\:focus\:ring-2 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .lui\:focus\:ring-zinc-950\/10 {
+    &:focus {
+      --tw-ring-color: var(--lui-color-zinc-950);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--lui-color-zinc-950) 10%, transparent);
+      }
+    }
+  }
   .lui\:focus\:outline-hidden {
     &:focus {
       --tw-outline-style: none;
@@ -2438,30 +2510,40 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
-  initial-value: rotateX(0);
 }
 @property --tw-rotate-y {
   syntax: "*";
   inherits: false;
-  initial-value: rotateY(0);
 }
 @property --tw-rotate-z {
   syntax: "*";
   inherits: false;
-  initial-value: rotateZ(0);
 }
 @property --tw-skew-x {
   syntax: "*";
   inherits: false;
-  initial-value: skewX(0);
 }
 @property --tw-skew-y {
   syntax: "*";
   inherits: false;
-  initial-value: skewY(0);
 }
 @property --tw-space-y-reverse {
   syntax: "*";
@@ -2564,21 +2646,6 @@
   initial-value: "";
   inherits: false;
 }
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -2595,11 +2662,14 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
-      --tw-rotate-x: rotateX(0);
-      --tw-rotate-y: rotateY(0);
-      --tw-rotate-z: rotateZ(0);
-      --tw-skew-x: skewX(0);
-      --tw-skew-y: skewY(0);
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
@@ -2622,9 +2692,6 @@
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
     }
   }
 }