shadcn_phlexcomponents 0.1.0 → 0.1.1

data/lib/components/date_picker.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DatePicker < Base
+    STYLES = "relative"
+
+    INPUT_STYLES = <<~HEREDOC
+      flex h-9 w-full rounded-md border border-input bg-transparent px-3 pr-10 py-1
+      text-base shadow-sm transition-colors placeholder:text-muted-foreground
+      focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+      disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
+    HEREDOC
+
+    CLEAR_BUTTON_STYLES = TAILWIND_MERGER.merge("#{Button.default_styles(
+      variant: :ghost,
+      size: :icon,
+    )} text-muted-foreground h-6 w-6")
+
+    def initialize(name: nil, id: nil, value: nil, format: "DD/MM/YYYY", disabled: false, settings: {}, **attributes)
+      @name = name
+      @id = id || @name
+      @value = value&.utc&.iso8601
+      @settings = settings
+      @format = format
+      @disabled = disabled
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          value: @value,
+          format: @format,
+          controller: "shadcn-phlexcomponents--date-picker",
+          settings: @settings.to_json,
+          has_value: @value.present?.to_s,
+          disabled: @disabled,
+          action: <<~HEREDOC,
+            mouseover->shadcn-phlexcomponents--date-picker#showClearButton
+            mouseout->shadcn-phlexcomponents--date-picker#hideClearButton
+          HEREDOC
+        },
+      }
+    end
+
+    def view_template
+      div(**@attributes) do
+        input(type: :text, id: @id, class: INPUT_STYLES, data: {
+          "shadcn-phlexcomponents--date-picker-target": "dateInput",
+          action: <<~HEREDOC,
+            input->shadcn-phlexcomponents--date-picker#changeDate
+            blur->shadcn-phlexcomponents--date-picker#inputBlur
+            keydown->shadcn-phlexcomponents--date-picker#closeCalendar
+          HEREDOC
+        })
+        input(
+          type: :hidden,
+          name: @name,
+          value: @value,
+          data: { "shadcn-phlexcomponents--date-picker-target": "hiddenInput" },
+        )
+
+        div(
+          class: "absolute right-3 inset-y-0 flex items-center -z-1",
+          data: {
+            action: "",
+          },
+        ) do
+          span(class: "pointer-events-none size-6 inline-flex items-center justify-center") do
+            icon(
+              "calendar",
+              class: "size-4 text-muted-foreground",
+              data: { "shadcn-phlexcomponents--date-picker-target": "calendarIcon" },
+            )
+          end
+        end
+
+        div(class: "absolute right-3 inset-y-0 flex items-center") do
+          button(
+            type: :button,
+            class: "#{CLEAR_BUTTON_STYLES} !hidden",
+            tabindex: -1,
+            data: {
+              action: "shadcn-phlexcomponents--date-picker#clear:stop",
+              "shadcn-phlexcomponents--date-picker-target": "clearButton",
+            },
+          ) do
+            icon("x")
+          end
+        end
+      end
+    end
+  end
+end

data/lib/components/date_range_picker.rb

@@ -0,0 +1,113 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DateRangePicker < Base
+    STYLES = <<~HEREDOC
+      flex w-full rounded-md border border-input bg-transparent px-3 pr-10 h-9
+      text-base shadow-sm transition-colors placeholder:text-muted-foreground
+      outline-none data-[focus=true]:ring-1 data-[focus=true]:ring-ring
+      data-disabled:cursor-not-allowed data-disabled:opacity-50 md:text-sm relative
+      items-center
+    HEREDOC
+
+    INPUT_STYLES = <<~HEREDOC
+      h-9 py-1
+      text-base md:text-sm outline-none w-[45%]
+    HEREDOC
+
+    CLEAR_BUTTON_STYLES = TAILWIND_MERGER.merge("#{Button.default_styles(
+      variant: :ghost,
+      size: :icon,
+    )} text-muted-foreground h-6 w-6")
+
+    def initialize(start_date: nil, end_date: nil, start_date_name: nil, end_date_name: nil, format: "DD/MM/YYYY",
+      disabled: false, settings: {}, **attributes)
+      @start_date = start_date&.utc&.iso8601
+      @end_date = end_date&.utc&.iso8601
+      @start_date_name = start_date_name
+      @end_date_name = end_date_name
+      @settings = settings
+      @format = format
+      @disabled = disabled
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          start_date: @start_date,
+          end_date: @end_date,
+          format: @format,
+          controller: "shadcn-phlexcomponents--date-range-picker",
+          settings: @settings.to_json,
+          has_value: (@start_date.present? && @end_date.present?).to_s,
+          disabled: @disabled,
+          action: <<~HEREDOC,
+            mouseover->shadcn-phlexcomponents--date-range-picker#showClearButton
+            mouseout->shadcn-phlexcomponents--date-range-picker#hideClearButton
+          HEREDOC
+        },
+      }
+    end
+
+    def view_template
+      div(**@attributes) do
+        input(type: :text, class: INPUT_STYLES, data: {
+          "shadcn-phlexcomponents--date-range-picker-target": "startDateInput",
+          action: <<~HEREDOC,
+            focus->shadcn-phlexcomponents--date-range-picker#openCalendar
+            input->shadcn-phlexcomponents--date-range-picker#changeDate
+            keydown->shadcn-phlexcomponents--date-range-picker#closeCalendar
+          HEREDOC
+        })
+        input(
+          type: :hidden,
+          name: @start_date_name,
+          value: @start_date,
+          data: { "shadcn-phlexcomponents--date-range-picker-target": "startDateHiddenInput" },
+        )
+
+        icon("minus", class: "size-4 text-muted-foreground px-3 w-[10%]")
+
+        input(type: :text, class: INPUT_STYLES, data: {
+          "shadcn-phlexcomponents--date-range-picker-target": "endDateInput",
+          action: <<~HEREDOC,
+            focus->shadcn-phlexcomponents--date-range-picker#openCalendar
+            input->shadcn-phlexcomponents--date-range-picker#changeDate
+            keydown->shadcn-phlexcomponents--date-range-picker#closeCalendar
+          HEREDOC
+        })
+        input(
+          type: :hidden,
+          name: @end_date_name,
+          value: @end_date,
+          data: { "shadcn-phlexcomponents--date-range-picker-target": "endDateHiddenInput" },
+        )
+
+        div(class: "absolute right-3 inset-y-0 flex items-center -z-1") do
+          span(class: "pointer-events-none size-6 inline-flex items-center justify-center") do
+            icon(
+              "calendar",
+              class: "size-4 text-muted-foreground",
+              data: { "shadcn-phlexcomponents--date-range-picker-target": "calendarIcon" },
+            )
+          end
+        end
+
+        div(class: "absolute right-3 inset-y-0 flex items-center") do
+          button(
+            type: :button,
+            class: "#{CLEAR_BUTTON_STYLES} !hidden",
+            tabindex: -1,
+            data: {
+              action: "shadcn-phlexcomponents--date-range-picker#clear:stop",
+              "shadcn-phlexcomponents--date-range-picker-target": "clearButton",
+            },
+          ) do
+            icon("x")
+          end
+        end
+      end
+    end
+  end
+end

data/lib/components/dialog.rb

@@ -49,4 +49,4 @@ module ShadcnPhlexcomponents
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dialog_close.rb

@@ -39,4 +39,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/dialog_content.rb

@@ -34,7 +34,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           "shadcn-phlexcomponents--dialog-target": "content",
-          state: "closed"
+          state: "closed",
         },
       }
     end
@@ -51,4 +51,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/dialog_description.rb

@@ -19,4 +19,4 @@ module ShadcnPhlexcomponents
       p(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dialog_footer.rb

@@ -8,4 +8,4 @@ module ShadcnPhlexcomponents
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dialog_header.rb

@@ -8,4 +8,4 @@ module ShadcnPhlexcomponents
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dialog_title.rb

@@ -19,4 +19,4 @@ module ShadcnPhlexcomponents
       h2(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dialog_trigger.rb

@@ -19,7 +19,7 @@ module ShadcnPhlexcomponents
         data: {
           action: "click->shadcn-phlexcomponents--dialog#open",
           "shadcn-phlexcomponents--dialog-target": "trigger",
-          as_child: @as_child.to_s
+          as_child: @as_child.to_s,
         },
       }
     end
@@ -47,4 +47,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/dropdown_menu.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class DropdownMenu < Base
-    STYLES = "inline-block".freeze
+    STYLES = "inline-block"
 
     def initialize(side: :bottom, aria_id: "dropdown-menu-#{SecureRandom.hex(5)}", **attributes)
       @side = side
@@ -16,7 +16,7 @@ module ShadcnPhlexcomponents
 
     def content(**attributes, &)
       DropdownMenuContent(aria_id: @aria_id, side: @side, **attributes, &)
-    end 
+    end
 
     def label(**attributes, &)
       DropdownMenuLabel(**attributes, &)
@@ -38,8 +38,8 @@ module ShadcnPhlexcomponents
       {
         data: {
           controller: "shadcn-phlexcomponents--dropdown-menu",
-          side: @side
-        }
+          side: @side,
+        },
       }
     end
 
@@ -47,4 +47,4 @@ module ShadcnPhlexcomponents
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dropdown_menu_content.rb

@@ -2,14 +2,14 @@
 
 module ShadcnPhlexcomponents
   class DropdownMenuContent < Base
-    STYLES = <<~HEREDOC.freeze
+    STYLES = <<~HEREDOC
       z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1
       text-popover-foreground shadow-md outline-none
       data-[state=open]:animate-in
-      data-[state=closed]:animate-out 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-[state=closed]:animate-out 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
     HEREDOC
 
@@ -20,7 +20,10 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(class: "hidden fixed top-0 left-0 w-max z-50", data: { "shadcn-phlexcomponents--dropdown-menu-target": "contentWrapper" }) do
+      div(
+        class: "hidden fixed top-0 left-0 w-max z-50",
+        data: { "shadcn-phlexcomponents--dropdown-menu-target": "contentWrapper" },
+      ) do
         div(**@attributes, &)
       end
     end
@@ -32,7 +35,7 @@ module ShadcnPhlexcomponents
         role: "menu",
         aria: {
           labelledby: "#{@aria_id}-trigger",
-          orientation: "vertical"
+          orientation: "vertical",
         },
         data: {
           state: "closed",
@@ -42,8 +45,8 @@ module ShadcnPhlexcomponents
             keydown.up->shadcn-phlexcomponents--dropdown-menu#focusLastItem:prevent
             keydown.down->shadcn-phlexcomponents--dropdown-menu#focusFirstItem:prevent
           HEREDOC
-        }
+        },
       }
     end
   end
-end
+end

data/lib/components/dropdown_menu_item.rb

@@ -1,9 +1,8 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-
   class DropdownMenuItem < Base
-    STYLES = <<~HEREDOC.freeze
+    STYLES = <<~HEREDOC
       relative flex cursor-default select-none items-center gap-2 rounded-sm px-2
       py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground
       data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0
@@ -26,7 +25,7 @@ module ShadcnPhlexcomponents
         merged_attributes = mix(@attributes, element_attributes)
         merged_attributes[:class] = styles
 
-        send(element.name, **merged_attributes) do        
+        send(element.name, **merged_attributes) do
           sanitize_as_child(element.children.to_s)
         end
       else
@@ -49,9 +48,9 @@ module ShadcnPhlexcomponents
             mouseover->shadcn-phlexcomponents--dropdown-menu#focusItem
             mouseout->shadcn-phlexcomponents--dropdown-menu#focusContent
           HEREDOC
-          "shadcn-phlexcomponents--dropdown-menu-target": "item"
-        }
+          "shadcn-phlexcomponents--dropdown-menu-target": "item",
+        },
       }
     end
   end
-end
+end

data/lib/components/dropdown_menu_item_to.rb

@@ -9,12 +9,15 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      @html_options, @options = @options, @name if block_given?
+      if block_given?
+        @html_options = @options
+        @options = @name
+      end
       @html_options ||= {}
       @disabled = @html_options[:disabled]
       @html_options = mix(default_attributes, @html_options)
       @html_options[:class] = TAILWIND_MERGER.merge("w-full #{default_styles} #{@html_options[:class]}")
-      
+
       if block_given?
         button_to(@options, @html_options, &)
       else
@@ -22,4 +25,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/dropdown_menu_label.rb

@@ -1,12 +1,11 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-
   class DropdownMenuLabel < Base
-    STYLES = "px-2 py-1.5 text-sm font-semibold".freeze
+    STYLES = "px-2 py-1.5 text-sm font-semibold"
 
     def view_template(&)
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/dropdown_menu_separator.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
-module ShadcnPhlexcomponents
 
+module ShadcnPhlexcomponents
   class DropdownMenuSeparator < Base
-    STYLES = "-mx-1 my-1 h-px bg-muted".freeze
+    STYLES = "-mx-1 my-1 h-px bg-muted"
 
     def view_template(&)
       div(**@attributes, &)
@@ -12,9 +12,9 @@ module ShadcnPhlexcomponents
       {
         role: "separator",
         aria: {
-          orientation: "horizontal"
-        }
+          orientation: "horizontal",
+        },
       }
     end
   end
-end
+end

data/lib/components/dropdown_menu_trigger.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-
   class DropdownMenuTrigger < Base
     def initialize(as_child: false, aria_id: nil, **attributes)
       @as_child = as_child
@@ -24,7 +23,7 @@ module ShadcnPhlexcomponents
           merged_attributes.delete(:role)
         end
 
-        send(element.name, **merged_attributes) do        
+        send(element.name, **merged_attributes) do
           sanitize_as_child(element.children.to_s)
         end
       else
@@ -39,20 +38,20 @@ module ShadcnPhlexcomponents
         aria: {
           haspopup: "menu",
           expanded: false,
-          controls: "#{@aria_id}-content"
+          controls: "#{@aria_id}-content",
         },
         data: {
           state: "closed",
           as_child: @as_child.to_s,
           action: <<~HEREDOC,
-          click->shadcn-phlexcomponents--dropdown-menu#toggle
-          keydown.space->shadcn-phlexcomponents--dropdown-menu#toggle
-          keydown.enter->shadcn-phlexcomponents--dropdown-menu#toggle
-          keydown.down->shadcn-phlexcomponents--dropdown-menu#toggle:prevent
+            click->shadcn-phlexcomponents--dropdown-menu#toggle
+            keydown.space->shadcn-phlexcomponents--dropdown-menu#toggle
+            keydown.enter->shadcn-phlexcomponents--dropdown-menu#toggle
+            keydown.down->shadcn-phlexcomponents--dropdown-menu#toggle:prevent
           HEREDOC
-          "shadcn-phlexcomponents--dropdown-menu-target": "trigger"
-        }
+          "shadcn-phlexcomponents--dropdown-menu-target": "trigger",
+        },
       }
     end
   end
-end
+end

data/lib/components/hover_card.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class HoverCard < Base
-    STYLES = "inline-block".freeze
+    STYLES = "inline-block"
 
     def initialize(side: :bottom, **attributes)
       @side = side
@@ -11,7 +11,7 @@ module ShadcnPhlexcomponents
 
     def content(**attributes, &)
       HoverCardContent(**attributes, &)
-    end 
+    end
 
     def trigger(**attributes, &)
       HoverCardTrigger(side: @side, **attributes, &)
@@ -21,13 +21,13 @@ module ShadcnPhlexcomponents
       {
         data: {
           controller: "shadcn-phlexcomponents--hover-card",
-          side: @side
-        }
-      }  
+          side: @side,
+        },
+      }
     end
 
     def view_template(&)
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/hover_card_content.rb

@@ -2,22 +2,20 @@
 
 module ShadcnPhlexcomponents
   class HoverCardContent < Base
-    STYLES = <<~HEREDOC.freeze
-      z-50 rounded-md border w-64 bg-popover p-4 text-popover-foreground shadow-md outline-none 
-      data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0
-      data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
+    STYLES = <<~HEREDOC
+      rounded-md border w-64 bg-popover p-4 text-popover-foreground shadow-md outline-none#{" "}
+      animate-in fade-in-0 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 
+      data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2#{" "}
     HEREDOC
-  
+
     def initialize(side: :bottom, **attributes)
       @side = side
       super(**attributes)
     end
 
-
     def view_template(&)
-      div(class: 'hidden fixed top-0 left-0 w-max z-50', data: { "shadcn-phlexcomponents--hover-card-target": "contentWrapper" }) do
+      div(class: "hidden", data: { "shadcn-phlexcomponents--hover-card-target": "content" }) do
         div(**@attributes, &)
       end
     end
@@ -27,10 +25,8 @@ module ShadcnPhlexcomponents
         tabindex: -1,
         data: {
           side: @side,
-          "shadcn-phlexcomponents--hover-card-target": "content",
-          action: "mouseover->shadcn-phlexcomponents--hover-card#clearCloseTimer mouseout->shadcn-phlexcomponents--hover-card#closeWithDelay"
-        }
+        },
       }
     end
   end
-end
+end

data/lib/components/hover_card_trigger.rb

@@ -21,8 +21,8 @@ module ShadcnPhlexcomponents
         if element.name == "button"
           merged_attributes.delete(:role)
         end
-        
-        send(element.name, **merged_attributes) do        
+
+        send(element.name, **merged_attributes) do
           sanitize_as_child(element.children.to_s)
         end
       else
@@ -35,16 +35,10 @@ module ShadcnPhlexcomponents
         id: @id,
         role: "button",
         data: {
-          state: "closed",
           as_child: @as_child.to_s,
-          action: <<~HEREDOC,
-            click->shadcn-phlexcomponents--hover-card#toggle
-            mouseover->shadcn-phlexcomponents--hover-card#openWithDelay
-            mouseout->shadcn-phlexcomponents--hover-card#closeWithDelay
-          HEREDOC
-          "shadcn-phlexcomponents--hover-card-target": "trigger"
-        }
+          "shadcn-phlexcomponents--hover-card-target": "trigger",
+        },
       }
     end
   end
-end
+end

data/lib/components/input.rb

@@ -29,4 +29,4 @@ module ShadcnPhlexcomponents
       input(**@attributes, &)
     end
   end
-end
+end

data/lib/components/label.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-
   class Label < Base
     STYLES = <<~HEREDOC
       text-sm font-medium leading-none peer-disabled:cursor-not-allowed
@@ -12,4 +11,4 @@ module ShadcnPhlexcomponents
       label(**@attributes, &)
     end
   end
-end
+end

data/lib/components/link.rb

@@ -11,7 +11,10 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      @html_options, @options = @options, @name if block_given?
+      if block_given?
+        @html_options = @options
+        @options = @name
+      end
       @html_options ||= {}
       @html_options = mix(default_attributes, @html_options)
       @html_options[:class] = TAILWIND_MERGER.merge("#{default_styles} #{@html_options[:class]}")
@@ -23,4 +26,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/loading_button.rb

@@ -18,4 +18,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end