shadcn_phlexcomponents 0.1.11 → 0.1.14

data/app/stylesheets/date_picker.css

@@ -1,3 +1,48 @@
+[data-vc='calendar'] {
+  @apply relative flex flex-col outline-none;
+}
+
+[data-vc='controls'] {
+  @apply absolute z-20 -left-1 -right-1 -top-1.5 flex justify-between items-center pt-1.5 px-1 pointer-events-none box-content;
+}
+
+[data-vc='grid'] {
+  @apply grid gap-4 grid-cols-1 md:grid-cols-2;
+}
+
+[data-vc='column'] {
+  @apply flex flex-col;
+}
+
+[data-vc='header'] {
+  @apply relative flex items-center mb-4;
+}
+
+[data-vc-header='content'] {
+  @apply grid grid-flow-col gap-x-1 auto-cols-max items-center justify-center px-4 whitespace-pre-wrap grow;
+}
+
+[data-vc='month'],
+[data-vc='year'] {
+  @apply inline-flex items-center justify-center whitespace-nowrap font-medium transition-all;
+  @apply disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4;
+  @apply shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
+  @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border;
+  @apply shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50;
+  @apply rounded-md gap-1.5 px-3 has-[>svg]:px-2.5 text-xs h-7 bg-transparent;
+}
+
+[data-vc-arrow='prev'],
+[data-vc-arrow='next'] {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium;
+  @apply transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none;
+  @apply [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring;
+  @apply focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20;
+  @apply dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border shadow-xs hover:bg-accent;
+  @apply hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 pointer-events-auto;
+  @apply size-7 bg-transparent p-0 opacity-50 hover:opacity-100;
+}
+
 [data-vc-arrow='next']:before {
   @apply bg-current size-4 mask-size-[auto_16px] mask-center mask-no-repeat absolute content-[''];
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>');
@@ -8,6 +53,79 @@
   mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>');
 }
 
+[data-vc='wrapper'] {
+  @apply flex items-center content-center h-full;
+}
+
+[data-vc='content'] {
+  @apply flex flex-col grow h-full;
+}
+
+[data-vc='months'] {
+  @apply grid gap-2 grid-cols-4 items-center grow;
+}
+
+[data-vc='years'] {
+  @apply grid gap-2 grid-cols-5 items-center grow;
+}
+
+[data-vc-months-month],
+[data-vc-years-year] {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all;
+  @apply disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4;
+  @apply shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
+  @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
+  @apply hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 h-9 px-4 py-2 has-[>svg]:px-3;
+  @apply aria-[selected=true]:text-primary-foreground aria-[selected=true]:bg-primary;
+  @apply aria-[selected=true]:hover:text-primary-foreground aria-[selected=true]:hover:bg-primary;
+}
+
+[data-vc='week'] {
+  @apply grid mb-2 grid-cols-[repeat(7,_1fr)] justify-items-center items-center text-center;
+}
+
+[data-vc-week-day] {
+  @apply text-muted-foreground rounded-md w-8 font-normal text-[0.8rem];
+}
+
+[data-vc='dates'] {
+  @apply grid gap-y-2 grid-cols-[repeat(7,_1fr)] justify-items-center items-center;
+}
+
+[data-vc-date-btn] {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm transition-all;
+  @apply disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4;
+  @apply shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px];
+  @apply aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive;
+  @apply hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 has-[>svg]:px-3 size-8 p-0 font-normal;
+  @apply aria-[disabled]:text-muted-foreground aria-[disabled]:opacity-50 aria-[disabled]:pointer-events-none;
+}
+
+[data-vc-date-selected] [data-vc-date-btn] {
+  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground;
+}
+
+[data-vc-date-today] [data-vc-date-btn] {
+  @apply bg-accent text-accent-foreground;
+}
+
+[data-vc-date-month='prev'] [data-vc-date-btn],
+[data-vc-date-month='next'] [data-vc-date-btn] {
+  @apply text-muted-foreground;
+}
+
+[data-vc-date-selected='middle'][data-vc-date-selected] [data-vc-date-btn] {
+  @apply bg-accent text-accent-foreground;
+}
+
+[data-vc-date-selected='first'][data-vc-date-selected] [data-vc-date-btn] {
+  @apply bg-primary text-primary-foreground;
+}
+
+[data-vc-date-hover] [data-vc-date-btn] {
+  @apply bg-accent text-accent-foreground;
+}
+
 [data-vc='grid'][data-vc-grid='hidden'] [data-vc='column'] {
   pointer-events: none;
   opacity: 0.3;

data/lib/shadcn_phlexcomponents/alias.rb

@@ -14,7 +14,9 @@ CheckboxGroup = ShadcnPhlexcomponents::CheckboxGroup
 Checkbox = ShadcnPhlexcomponents::Checkbox
 Collapsible = ShadcnPhlexcomponents::Collapsible
 Command = ShadcnPhlexcomponents::Command
+CommandItem = ShadcnPhlexcomponents::CommandItem
 Combobox = ShadcnPhlexcomponents::Combobox
+ComboboxItem = ShadcnPhlexcomponents::ComboboxItem
 DatePicker = ShadcnPhlexcomponents::DatePicker
 DateRangePicker = ShadcnPhlexcomponents::DateRangePicker
 Dialog = ShadcnPhlexcomponents::Dialog
@@ -42,4 +44,5 @@ Textarea = ShadcnPhlexcomponents::Textarea
 ThemeSwitcher = ShadcnPhlexcomponents::ThemeSwitcher
 Toast = ShadcnPhlexcomponents::Toast
 ToastContainer = ShadcnPhlexcomponents::ToastContainer
+Toggle = ShadcnPhlexcomponents::Toggle
 Tooltip = ShadcnPhlexcomponents::Tooltip

data/lib/shadcn_phlexcomponents/components/accordion.rb

@@ -81,6 +81,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
+          accordion_target: "trigger",
           action: <<~HEREDOC,
             click->accordion#toggle
             keydown.up->accordion#focusTrigger:prevent
@@ -119,7 +120,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          shadcn_phlexcomponents: "accordion-content-container",
+          accordion_target: "content"
         },
       ) do
         div(**@attributes, &)

data/lib/shadcn_phlexcomponents/components/alert_dialog.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class AlertDialog < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     def initialize(open: false, **attributes)
       @open = open
@@ -49,14 +49,18 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          controller: "dialog",
-          dialog_is_open_value: @open.to_s,
-        },
-      }
+          controller: "alert-dialog",
+          alert_dialog_is_open_value: @open.to_s
+        }
+      }  
     end
 
     def view_template(&)
-      div(**@attributes, &)
+      div(**@attributes) do
+        overlay("alert-dialog")
+
+        yield
+      end
     end
   end
 
@@ -75,10 +79,10 @@ module ShadcnPhlexcomponents
           expanded: "false",
           controls: "#{@aria_id}-content",
         },
-        data: {
-          action: "click->dialog#open",
-          dialog_target: "trigger",
+        data: { 
           as_child: @as_child.to_s,
+          alert_dialog_target: "trigger",
+          action: "click->alert-dialog#open"
         },
       }
     end
@@ -106,7 +110,7 @@ module ShadcnPhlexcomponents
         data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
         data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)]
         translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg
-        pointer-events-auto
+        pointer-events-auto outline-none
       HEREDOC
     )
 
@@ -126,14 +130,13 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          dialog_target: "content",
+          alert_dialog_target: "content"
         },
       }
     end
 
     def view_template(&)
-      @class = @attributes.delete(:class)
-      div(class: "#{@class} hidden", **@attributes, &)
+      div(style: { display: "none" }, **@attributes, &)
     end
   end
 
@@ -201,7 +204,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          action: "click->dialog#close",
+          action: "click->alert-dialog#close",
         },
       }
     end
@@ -222,7 +225,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          action: "click->dialog#close",
+          action: "click->alert-dialog#close",
         },
       }
     end

data/lib/shadcn_phlexcomponents/components/base.rb

@@ -141,5 +141,19 @@ module ShadcnPhlexcomponents
         disabled
       end
     end
+
+    def overlay(component)
+      div(
+        style: { display: "none" },
+        class: "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 pointer-events-auto",
+        aria: {
+          hidden: true,
+        },
+        data: {
+          state: "closed",
+          "#{component}-target" => "overlay"
+        }
+      )
+    end
   end
 end

data/lib/shadcn_phlexcomponents/components/collapsible.rb

@@ -84,8 +84,7 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      @class = @attributes.delete(:class)
-      div(class: "#{@class} hidden", **@attributes, &)
+      div(style: { display: "none" }, **@attributes, &)
     end
   end
 end

data/lib/shadcn_phlexcomponents/components/combobox.rb

@@ -9,18 +9,24 @@ module ShadcnPhlexcomponents
       name: nil,
       value: nil,
       placeholder: nil,
-      dir: "ltr",
       include_blank: false,
       disabled: false,
+      search_path: nil,
+      search_error_text: "Something went wrong, please try again.",
+      search_empty_text: "No results found",
+      search_placeholder_text: "Search...",
       **attributes
     )
       @id = id
       @name = name
       @value = value
       @placeholder = placeholder
-      @dir = dir
       @include_blank = include_blank
       @disabled = disabled
+      @search_path = search_path
+      @search_error_text = search_error_text
+      @search_empty_text = search_empty_text
+      @search_placeholder_text = search_placeholder_text
       @aria_id = "combobox-#{SecureRandom.hex(5)}"
       super(**attributes)
     end
@@ -29,7 +35,6 @@ module ShadcnPhlexcomponents
       ComboboxTrigger(
         id: @id,
         aria_id: @aria_id,
-        dir: @dir,
         value: @value,
         placeholder: @placeholder,
         disabled: @disabled,
@@ -39,7 +44,13 @@ module ShadcnPhlexcomponents
 
     def content(**attributes, &)
       ComboboxContent(
-        aria_id: @aria_id, dir: @dir, include_blank: @include_blank, **attributes, &
+        include_blank: @include_blank,
+        search_error_text: @search_error_text,
+        search_empty_text: @search_empty_text,
+        search_placeholder_text: @search_placeholder_text,
+        aria_id: @aria_id, 
+        **attributes, 
+        &
       )
     end
 
@@ -69,13 +80,18 @@ module ShadcnPhlexcomponents
       ComboboxTrigger(
         id: @id,
         aria_id: @aria_id,
-        dir: @dir,
         value: @value,
         placeholder: @placeholder,
         disabled: @disabled,
       )
 
-      ComboboxContent(aria_id: @aria_id, dir: @dir, include_blank: @include_blank) do
+      ComboboxContent(
+        aria_id: @aria_id, 
+        include_blank: @include_blank, 
+        search_error_text: @search_error_text, 
+        search_empty_text: @search_empty_text,
+        search_placeholder_text: @search_placeholder_text
+      ) do
         collection.each do |item|
           value = item.public_send(value_method)
           text = item.public_send(text_method)
@@ -103,6 +119,7 @@ module ShadcnPhlexcomponents
         data: {
           aria_id: @aria_id,
           controller: "combobox",
+          search_path: @search_path,
           combobox_selected_value: @value,
         },
       }
@@ -117,25 +134,22 @@ module ShadcnPhlexcomponents
         aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex items-center
         justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs
         transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50
-        data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[combobox-target=triggerText]:line-clamp-1#{" "}
-        *:data-[combobox-target=triggerText]:flex *:data-[combobox-target=triggerText]:items-center *:data-[combobox-target=triggerText]:gap-2
-        [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
-        data-[placeholder]:data-[has-value=false]:text-muted-foreground w-full
+        h-9 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
+        data-[placeholder]:data-[has-value=false]:text-muted-foreground w-full disabled:dark:hover:bg-input/30
       HEREDOC
     )
 
-    def initialize(id: nil, value: nil, placeholder: nil, dir: "ltr", aria_id: nil, **attributes)
+    def initialize(id: nil, value: nil, placeholder: nil, aria_id: nil, **attributes)
       @id = id
       @value = value
       @placeholder = placeholder
-      @dir = dir
       @aria_id = aria_id
       super(**attributes)
     end
 
     def view_template
       button(**@attributes) do
-        span(class: "pointer-events-none", data: { combobox_target: "triggerText" }) do
+        span(class: "pointer-events-none line-clamp-1 flex items-center gap-2", data: { combobox_target: "triggerText" }) do
           @value || @placeholder
         end
 
@@ -147,7 +161,6 @@ module ShadcnPhlexcomponents
       {
         type: "button",
         id: @id,
-        dir: @dir,
         role: "combobox",
         aria: {
           autocomplete: "none",
@@ -159,8 +172,6 @@ module ShadcnPhlexcomponents
           has_value: @value.present?.to_s,
           action: <<~HEREDOC,
             click->combobox#toggle
-            keydown.space->combobox#open
-            keydown.enter->combobox#open
             keydown.down->combobox#open:prevent
           HEREDOC
           combobox_target: "trigger",
@@ -176,27 +187,44 @@ module ShadcnPhlexcomponents
         data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
         data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
         data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50
-        max-h-(--radix-popper-available-height) min-w-[8rem] origin-(--radix-popper-transform-origin)
-        overflow-x-hidden overflow-y-auto rounded-md border shadow-md pointer-events-auto outline-none
+        min-w-[8rem] origin-(--radix-popper-transform-origin)
+        rounded-md border shadow-md pointer-events-auto outline-none
       HEREDOC
     )
 
-    def initialize(include_blank: false, dir: "ltr", side: :bottom, align: :center, aria_id: nil, search_placeholder: "Search...", **attributes)
+    def initialize(
+      include_blank: false, 
+      side: :bottom, 
+      align: :center, 
+      aria_id: nil, 
+      search_error_text: nil,
+      search_empty_text: nil,
+      search_placeholder_text: nil,
+      **attributes
+    )
       @include_blank = include_blank
-      @dir = dir
       @side = side
       @align = align
-      @search_placeholder = search_placeholder
+      @search_error_text = search_error_text
+      @search_empty_text = search_empty_text
+      @search_placeholder_text = search_placeholder_text
       @aria_id = aria_id
       super(**attributes)
     end
 
     def view_template(&)
       div(
-        class: "hidden fixed top-0 left-0 w-max z-50",
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
         data: { combobox_target: "contentContainer" },
       ) do
         div(**@attributes) do
+          template do
+            ComboboxGroup do
+              ComboboxLabel { "" }
+            end 
+          end
+
           label(
             class: "sr-only",
             id: "#{@aria_id}-search-label",
@@ -224,19 +252,29 @@ module ShadcnPhlexcomponents
               },
               data: {
                 combobox_target: "searchInput",
-                action: "input->combobox#search",
+                action: "keydown->combobox#inputKeydown input->combobox#search",
               },
             )
           end
 
-          div(class: "p-1 max-h-80 overflow-y-auto", id: "#{@aria_id}-list", data: { combobox_target: "list" }) do
-            if @include_blank
-              ComboboxItem(aria_id: @aria_id, value: "", class: "h-8", hide_icon: true) do
-                @include_blank.is_a?(String) ? @include_blank : ""
+          div(class: "p-1 max-h-80 overflow-y-auto", data: { combobox_target: "listContainer"})  do
+            ComboboxText(target: "empty") { @search_empty_text }
+            ComboboxText(target: "error") { @search_error_text }
+            ComboboxText(target: "loading") do
+              div(class: "flex justify-center", aria: { label: "Loading" }) do
+                icon("loader-circle", class: "animate-spin")
               end
             end
 
-            div(data: { combobox_target: "results" }, &)
+            div(id: "#{@aria_id}-list", data: { combobox_target: "list" }) do
+              if @include_blank
+                ComboboxItem(aria_id: @aria_id, value: "", class: "h-8") do
+                  @include_blank.is_a?(String) ? @include_blank : ""
+                end
+              end
+
+              yield
+            end
           end
         end
       end
@@ -245,7 +283,6 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         id: "#{@aria_id}-content",
-        dir: @dir,
         tabindex: -1,
         role: "listbox",
         aria: {
@@ -261,7 +298,7 @@ module ShadcnPhlexcomponents
             combobox:click:outside->combobox#clickOutside
             keydown.up->combobox#highlightItem:prevent
             keydown.down->combobox#highlightItem:prevent
-            keydown.enter->combobox#select
+            keydown.enter->combobox#select:prevent
           HEREDOC
         },
       }
@@ -280,14 +317,6 @@ module ShadcnPhlexcomponents
     def view_template(&)
       div(**@attributes, &)
     end
-
-    def default_attributes
-      {
-        data: {
-          combobox_target: "label",
-        },
-      }
-    end
   end
 
   class ComboboxItem < Base
@@ -365,34 +394,35 @@ module ShadcnPhlexcomponents
     end
   end
 
-  class ComboboxSeparator < Base
-    class_variants(base: "bg-border pointer-events-none -mx-1 my-1 h-px")
-
-    def view_template(&)
-      div(**@attributes, &)
-    end
-
-    def default_attributes
-      { aria: { hidden: "true" } }
-    end
-  end
-
-  class ComboboxEmpty < Base
+  class ComboboxText < Base
     class_variants(base: "py-6 text-center text-sm hidden")
+    
+    def initialize(target:, **attributes)
+      @target = target
+      super(**attributes)
+    end
 
     def default_attributes
       {
         role: "presentation",
-        data: { combobox_target: "empty" },
+        data: { combobox_target: @target },
       }
     end
 
     def view_template(&)
-      if block_given?
-        div(**@attributes, &)
-      else
-        div(**@attributes) { "No results found" }
-      end
+      div(**@attributes, &)
+    end
+  end
+
+  class ComboboxSeparator < Base
+    class_variants(base: "bg-border pointer-events-none -mx-1 my-1 h-px")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      { aria: { hidden: "true" } }
     end
   end
 end