lightning_ui_kit 0.1.3 → 0.2.0

data/app/components/lightning_ui_kit/text_component.rb

@@ -7,6 +7,6 @@ class LightningUiKit::TextComponent < LightningUiKit::BaseComponent
   end
 
   def classes
-    merge_classes(["text-zinc-600 text-#{@size}", @options[:class]].compact.join(" "))
+    merge_classes(["lui:text-zinc-600 lui:text-#{@size}", @options[:class]].compact.join(" "))
   end
 end

data/app/components/lightning_ui_kit/textarea_component.html.erb

@@ -1,23 +1,25 @@
 <%= tag.div(
-  class: "[&>[data-slot=label]+[data-slot=control]]:mt-3 [&>[data-slot=label]+[data-slot=description]]:mt-1 [&>[data-slot=description]+[data-slot=control]]:mt-3 [&>[data-slot=control]+[data-slot=description]]:mt-3 [&>[data-slot=control]+[data-slot=error]]:mt-3 *:data-[slot=label]:font-medium",
+  class: "lui:[&>[data-slot=label]+[data-slot=control]]:mt-3 lui:[&>[data-slot=label]+[data-slot=description]]:mt-1
+  lui:[&>[data-slot=description]+[data-slot=control]]:mt-3 lui:[&>[data-slot=control]+[data-slot=description]]:mt-3
+  lui:[&>[data-slot=control]+[data-slot=error]]:mt-3 lui:*:data-[slot=label]:font-medium",
   data:
 ) do %>
   <% if @label %>
     <%= tag.label(
       @label,
-      class: "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6",
+      class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
       data: label_data
     ) %>
   <% end %>
   <% if @description %>
     <%= tag.p(
       @description,
-      class: "text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6",
+      class: "lui:text-base/6 lui:text-zinc-500 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
       data: description_data
     ) %>
   <% end %>
   <% if @form %>
-    <span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm dark:before:hidden after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
+    <span data-slot="control" class="lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[calc(var(--radius-lg)-1px)] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-red-500/10">
       <%= @form.text_area(
         @name,
         value: @value,
@@ -25,13 +27,13 @@
         cols: @cols,
         multiple: @multiple,
         data: input_data,
-        class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500 dark:data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
+        class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500 lui:data-disabled:border-zinc-950/20",
         disabled: @disabled,
         autofocus: @autofocus
       ) %>
     </span>
   <% else %>
-    <span data-slot="control" class="relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm dark:before:hidden after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset sm:focus-within:after:ring-2 sm:focus-within:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none has-data-invalid:before:shadow-red-500/10">
+    <span data-slot="control" class="lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[calc(var(--radius-lg)-1px)] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-red-500/10">
       <%= text_area_tag(
         @name,
         @value,
@@ -39,7 +41,7 @@
         cols: @cols,
         multiple: @multiple,
         data: input_data,
-        class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500 dark:data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
+        class: "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:border lui:border-zinc-950/10 lui:hover:border-zinc-950/20 lui:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:hover:border-red-500 lui:data-disabled:border-zinc-950/20",
         disabled: @disabled,
         autofocus: @autofocus
       ) %>
@@ -48,7 +50,7 @@
   <% if has_errors? %>
     <%= tag.p(
       error_messages,
-      class: "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6",
+      class: "lui:text-base/6 lui:text-red-600 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
       data: error_data
     ) %>
   <% end %>

data/app/javascript/lightning_ui_kit/controllers/accordion_controller.js

@@ -2,9 +2,14 @@ import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   static targets = ["content", "item"];
+  static values = {
+    openFirst: { type: Boolean, default: true }
+  };
 
   connect() {
-    this.openItem(this.itemTargets[0])
+    if (this.openFirstValue) {
+      this.openItem(this.itemTargets[0]);
+    }
   }
 
   toggle(e) {
@@ -24,28 +29,28 @@ export default class extends Controller {
   }
 
   openItem(item) {
-    const content = item.querySelector("[data-accordion-target=content]");
-    content.classList.remove("grid-rows-[0fr]");
-    content.classList.add("grid-rows-[1fr]");
-    content.classList.remove("opacity-0");
-    content.classList.add("opacity-100");
-    const arrow = item.querySelector("[data-accordion-target=arrow]");
-    arrow.classList.add("rotate-180");
+    const content = item.querySelector("[data-lui-accordion-target=content]");
+    content.classList.remove("lui:grid-rows-[0fr]");
+    content.classList.add("lui:grid-rows-[1fr]");
+    content.classList.remove("lui:opacity-0");
+    content.classList.add("lui:opacity-100");
+    const arrow = item.querySelector("[data-lui-accordion-target=arrow]");
+    arrow.classList.add("lui:rotate-180");
   }
 
   closeItem(item) {
-    const content = item.querySelector("[data-accordion-target=content]");
-    content.classList.remove("grid-rows-[1fr]");
-    content.classList.add("grid-rows-[0fr]");
-    content.classList.remove("opacity-100");
-    content.classList.add("opacity-0");
-    const arrow = item.querySelector("[data-accordion-target=arrow]");
-    arrow.classList.remove("rotate-180");
+    const content = item.querySelector("[data-lui-accordion-target=content]");
+    content.classList.remove("lui:grid-rows-[1fr]");
+    content.classList.add("lui:grid-rows-[0fr]");
+    content.classList.remove("lui:opacity-100");
+    content.classList.add("lui:opacity-0");
+    const arrow = item.querySelector("[data-lui-accordion-target=arrow]");
+    arrow.classList.remove("lui:rotate-180");
   }
 
   isOpen(item) {
-    const content = item.querySelector("[data-accordion-target=content]");
-    return content.classList.contains("grid-rows-[1fr]");
+    const content = item.querySelector("[data-lui-accordion-target=content]");
+    return content.classList.contains("lui:grid-rows-[1fr]");
   }
 }
 

data/app/javascript/lightning_ui_kit/controllers/banner_controller.js

@@ -2,10 +2,10 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   close() {
-    this.element.classList.remove("opacity-100");
-    this.element.classList.add("opacity-0");
+    this.element.classList.remove("lui:opacity-100");
+    this.element.classList.add("lui:opacity-0");
     setTimeout(() => {
-      this.element.classList.add("hidden");
+      this.element.classList.add("lui:hidden");
     }, 300);
   }
 }

data/app/javascript/lightning_ui_kit/controllers/dropdown_controller.js

@@ -7,6 +7,7 @@ export default class Dropdown extends Controller {
   connect() {
     useTransition(this, {
       element: this.menuTarget,
+      hiddenClass: "lui:hidden"
     });
   }
 
@@ -15,7 +16,7 @@ export default class Dropdown extends Controller {
   }
 
   hide(event) {
-    if (!this.element.contains(event.target) && !this.menuTarget.classList.contains("hidden")) {
+    if (!this.element.contains(event.target) && !this.menuTarget.classList.contains("lui:hidden")) {
       this.leave();
     }
   }

data/app/javascript/lightning_ui_kit/controllers/dropzone_controller.js

@@ -21,8 +21,11 @@ class Upload {
         const hiddenField = document.createElement('input')
         hiddenField.setAttribute("type", "hidden");
         hiddenField.setAttribute("value", blob.signed_id);
-        hiddenField.name = this.controller.inputTarget.name
-        this.controller.filesTarget.querySelector(`#upload_${this.directUpload.id}`).appendChild(hiddenField)
+        hiddenField.name = this.controller.inputTarget.name;
+        this.controller.filesTarget
+          .querySelector(`#upload_${this.directUpload.id}`)
+          .appendChild(hiddenField);
+        this.controller.inputTarget.value = "";
       }
     });
   }

data/lib/lightning_ui_kit/version.rb

@@ -1,3 +1,3 @@
 module LightningUiKit
-  VERSION = "0.1.3"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lightning_ui_kit
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.2.0
 platform: ruby
 authors:
 - Alex Koval
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-27 00:00:00.000000000 Z
+date: 2025-04-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -108,6 +108,8 @@ files:
 - app/assets/builds/lightning_ui_kit.js
 - app/assets/builds/lightning_ui_kit.js.map
 - app/assets/stylesheets/lightning_ui_kit/application.css
+- app/assets/vendor/lightning_ui_kit.css
+- app/assets/vendor/lightning_ui_kit.js
 - app/components/lightning_ui_kit/alert_component.html.erb
 - app/components/lightning_ui_kit/alert_component.rb
 - app/components/lightning_ui_kit/avatar_component.html.erb