Dual range slider

README.md

@@ -115,7 +115,21 @@ We’ve released an [official Figma UI kit for Petal](https://www.figma.com/comm
 ## FAQ
 
 **Q: Do I need Alpine JS?**
-A: No we have designed the components to use either Alpine JS or LiveView.JS.
+A: Most components work with either Alpine JS or LiveView.JS. However, some components like the dual range slider require Alpine.js for client-side interactivity. If you're using these components, you'll need to include Alpine.js in your project.
+
+To add Alpine.js via CDN:
+```html
+<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
+```
+
+Or via npm:
+```bash
+npm install alpinejs
+```
+
+**Components that require Alpine.js:**
+- Dual range slider (`type="range-dual"`)
+- Some dropdown variants
 
 **Q: What if I want to use my own components too?**
 A: You can install this library and import only the components you need.

assets/default.css

@@ -291,7 +291,7 @@
   }
 
   .pc-icon-button__tooltip__text {
-    @apply relative z-10 p-2 text-xs leading-none text-white bg-gray-900 rounded-xs shadow-lg whitespace-nowrap dark:bg-gray-700;
+    @apply relative z-10 p-2 text-xs leading-none text-white bg-gray-900 shadow-lg rounded-xs whitespace-nowrap dark:bg-gray-700;
   }
 
   .pc-icon-button__tooltip__arrow {
@@ -857,7 +857,7 @@
     @apply dark:text-white;
   }
   .pc-switch {
-    @apply relative inline-flex items-center justify-center shrink-0 cursor-pointer;
+    @apply relative inline-flex items-center justify-center cursor-pointer shrink-0;
   }
   .pc-switch--xs {
     @apply w-6 h-3;
@@ -1093,6 +1093,63 @@
     @apply flex items-center justify-center text-left text-gray-900 dark:text-white;
   }
 
+  /* Dual and Numeric Range Styles */
+
+  .pc-slider-input {
+    @apply absolute z-10 w-full h-0 bg-transparent outline-none appearance-none pointer-events-none;
+  }
+
+  .pc-slider-input::-webkit-slider-thumb {
+    @apply appearance-none w-6 h-6 bg-primary-500 rounded-full border-[3px] border-white dark:border-gray-800 pointer-events-auto cursor-pointer shadow dark:shadow-lg shadow-gray-900/30 relative z-20 translate-y-0.5 transition-transform duration-150 ease-in-out;
+  }
+
+  .pc-slider-input::-moz-range-thumb {
+    @apply w-6 h-6 bg-primary-500 rounded-full border-[3px] border-white dark:border-gray-800 pointer-events-auto cursor-pointer shadow dark:shadow-lg shadow-gray-900/30 relative z-20 translate-y-0.5 transition-transform duration-150 ease-in-out;
+  }
+
+  .pc-slider-track {
+    @apply absolute z-0 w-full h-1.5 bg-gray-200 rounded-full dark:bg-gray-700;
+  }
+
+  .pc-slider-range {
+    @apply absolute z-0 h-1.5 rounded-full bg-primary-500;
+  }
+
+  /* Customization options for different sizes */
+  .pc-slider-input--sm::-webkit-slider-thumb {
+    @apply w-5 h-5 border-2;
+  }
+
+  .pc-slider-input--sm::-moz-range-thumb {
+    @apply w-5 h-5 border-2;
+  }
+
+  .pc-slider-input--lg::-webkit-slider-thumb {
+    @apply border-4 w-7 h-7;
+  }
+
+  .pc-slider-input--lg::-moz-range-thumb {
+    @apply border-4 w-7 h-7;
+  }
+
+  /* Hover and focus states for slider thumbs */
+  .pc-slider-input:hover::-webkit-slider-thumb {
+    @apply scale-110 bg-primary-600;
+  }
+
+  .pc-slider-input:focus::-webkit-slider-thumb {
+    @apply scale-110 ring-4 ring-primary-200 dark:ring-primary-500/30 ring-offset-0;
+  }
+
+  .pc-slider-input:hover::-moz-range-thumb {
+    @apply scale-110 bg-primary-600;
+  }
+
+  .pc-slider-input:focus::-moz-range-thumb {
+    @apply scale-110 ring-4 ring-primary-200 dark:ring-primary-500/30 ring-offset-0;
+  }
+
+
   /* Radio Card Size Styles */
 
   /* Apply padding to .pc-radio-card__content */
@@ -1285,7 +1342,7 @@
     @apply object-cover rounded-full;
   }
   .pc-avatar--with-placeholder-icon {
-    @apply relative inline-block overflow-hidden bg-gray-100 text-gray-300 rounded-full dark:bg-gray-700;
+    @apply relative inline-block overflow-hidden text-gray-300 bg-gray-100 rounded-full dark:bg-gray-700;
   }
   .pc-avatar--with-placeholder-initials {
     @apply flex items-center justify-center font-semibold text-gray-500 uppercase bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300;
@@ -1562,10 +1619,10 @@
   /* Cards - with media */
 
   .pc-card__image {
-    @apply shrink-0 object-cover w-full;
+    @apply object-cover w-full shrink-0;
   }
   .pc-card__image-placeholder {
-    @apply shrink-0 w-full bg-gray-300 dark:bg-gray-700;
+    @apply w-full bg-gray-300 shrink-0 dark:bg-gray-700;
   }
 
   /* Cards - footer */
@@ -1577,7 +1634,7 @@
   /* Table */
 
   .pc-table--basic {
-    @apply min-w-full overflow-hidden rounded-xs shadow-sm table-auto ring-1 ring-gray-200 dark:ring-gray-800 sm:rounded;
+    @apply min-w-full overflow-hidden shadow-sm table-auto rounded-xs ring-1 ring-gray-200 dark:ring-gray-800 sm:rounded;
   }
   .pc-table--ghost {
     @apply min-w-full overflow-hidden table-auto;
@@ -1631,7 +1688,7 @@
     @apply text-base font-semibold;
   }
   .pc-accordion-item__chevron {
-    @apply shrink-0 w-6 h-6 ml-3 text-gray-400 duration-300 fill-current dark:group-hover:text-gray-300 group-hover:text-gray-500;
+    @apply w-6 h-6 ml-3 text-gray-400 duration-300 fill-current shrink-0 dark:group-hover:text-gray-300 group-hover:text-gray-500;
   }
   .pc-accordion-item__content-container {
     @apply p-5 bg-white border border-gray-200 dark:border-gray-700 dark:bg-gray-900;
@@ -2302,7 +2359,7 @@
 
   /* Indicator */
   .pc-stepper__indicator {
-    @apply grid shrink-0 text-white transition-all duration-200 bg-gray-500 rounded-full place-items-center;
+    @apply grid text-white transition-all duration-200 bg-gray-500 rounded-full shrink-0 place-items-center;
   }
 
   .pc-stepper__node--complete .pc-stepper__indicator {
@@ -2462,7 +2519,7 @@
   }
 
   .pc-vertical-menu-item__icon {
-    @apply shrink-0 w-5 h-5;
+    @apply w-5 h-5 shrink-0;
   }
 
   .pc-vertical-menu-item {
@@ -2511,11 +2568,11 @@
   }
 
   .pc-vertical-menu-item__icon--active {
-    @apply shrink-0 w-5 h-5;
+    @apply w-5 h-5 shrink-0;
   }
 
   .pc-vertical-menu-item__icon--inactive {
-    @apply shrink-0 w-5 h-5;
+    @apply w-5 h-5 shrink-0;
   }
 
   /* Other */

lib/petal_components/button_group.ex

@@ -94,10 +94,10 @@ defmodule PetalComponents.ButtonGroup do
         button_border_class={@button_border_class}
         {group_btn_assigns}
       >
-        <%= if group_btn_assigns[:inner_block] do %>
+        <%= if Map.has_key?(group_btn_assigns, :inner_block) && group_btn_assigns.inner_block != nil do %>
           {render_slot(group_btn_assigns)}
         <% else %>
-          {group_btn_assigns.label}
+          {Map.get(group_btn_assigns, :label, "")}
         <% end %>
       </.group_button>
     </div>