shadcn_phlexcomponents 0.1.0 → 0.1.1

data/lib/components/pagination.rb

@@ -7,7 +7,7 @@ module ShadcnPhlexcomponents
     def link(**attributes, &)
       PaginationLink(**attributes, &)
     end
-    
+
     def previous(**attributes, &)
       PaginationPrevious(**attributes, &)
     end
@@ -15,7 +15,7 @@ module ShadcnPhlexcomponents
     def next(**attributes, &)
       PaginationNext(**attributes, &)
     end
-    
+
     def ellipsis(**attributes, &)
       PaginationEllipsis(**attributes, &)
     end
@@ -25,7 +25,7 @@ module ShadcnPhlexcomponents
         role: "navigation",
         aria: {
           label: "navigation",
-        }
+        },
       }
     end
 
@@ -35,4 +35,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/pagination_ellipsis.rb

@@ -7,8 +7,8 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         aria: {
-          hidden: "true"
-        }
+          hidden: "true",
+        },
       }
     end
 
@@ -21,4 +21,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/pagination_link.rb

@@ -3,7 +3,7 @@
 module ShadcnPhlexcomponents
   class PaginationLink < Base
     def initialize(href: nil, active: false, **attributes)
-      @href = href  
+      @href = href
       @active = active
       super(**attributes)
     end
@@ -20,9 +20,9 @@ module ShadcnPhlexcomponents
       {
         href: @href,
         aria: {
-          current: @active ? "page" : nil
-        }
-      }  
+          current: @active ? "page" : nil,
+        },
+      }
     end
 
     def view_template(&)
@@ -31,4 +31,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/pagination_next.rb

@@ -3,7 +3,7 @@
 module ShadcnPhlexcomponents
   class PaginationNext < Base
     def initialize(href: nil, **attributes)
-      @href = href  
+      @href = href
       super(**attributes)
     end
 
@@ -15,9 +15,9 @@ module ShadcnPhlexcomponents
       {
         href: @href,
         aria: {
-          label: "Go to next page"
-        }
-      }  
+          label: "Go to next page",
+        },
+      }
     end
 
     def view_template(&)
@@ -29,4 +29,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/pagination_previous.rb

@@ -11,9 +11,9 @@ module ShadcnPhlexcomponents
       {
         href: @href,
         aria: {
-          label: "Go to previous page"
-        }
-      }  
+          label: "Go to previous page",
+        },
+      }
     end
 
     def default_styles
@@ -29,4 +29,4 @@ module ShadcnPhlexcomponents
       end
     end
   end
-end
+end

data/lib/components/popover.rb

@@ -1,9 +1,8 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-
   class Popover < Base
-    STYLES = "inline-block".freeze
+    STYLES = "inline-block"
 
     def initialize(side: :bottom, aria_id: "popover-#{SecureRandom.hex(5)}", **attributes)
       @side = side
@@ -13,7 +12,7 @@ module ShadcnPhlexcomponents
 
     def content(**attributes, &)
       PopoverContent(side: @side, aria_id: @aria_id, **attributes, &)
-    end 
+    end
 
     def trigger(**attributes, &)
       PopoverTrigger(aria_id: @aria_id, **attributes, &)
@@ -23,13 +22,13 @@ module ShadcnPhlexcomponents
       {
         data: {
           controller: "shadcn-phlexcomponents--popover",
-          side: @side
-        }
-      }  
+          side: @side,
+        },
+      }
     end
 
     def view_template(&)
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/popover_content.rb

@@ -2,14 +2,14 @@
 
 module ShadcnPhlexcomponents
   class PopoverContent < Base
-    STYLES = <<~HEREDOC.freeze
-      z-50 rounded-md border w-72 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
+      z-50 rounded-md border w-72 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#{" "}
       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, aria_id: nil, **attributes)
       @side = side
       @aria_id = aria_id
@@ -17,7 +17,10 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(class: 'hidden fixed top-0 left-0 w-max z-50', data: { "shadcn-phlexcomponents--popover-target": "contentWrapper" }) do
+      div(
+        class: "hidden fixed top-0 left-0 w-max z-50",
+        data: { "shadcn-phlexcomponents--popover-target": "contentWrapper" },
+      ) do
         div(**@attributes, &)
       end
     end
@@ -29,9 +32,9 @@ module ShadcnPhlexcomponents
         role: "dialog",
         data: {
           side: @side,
-          "shadcn-phlexcomponents--popover-target": "content"
-        }
+          "shadcn-phlexcomponents--popover-target": "content",
+        },
       }
     end
   end
-end
+end

data/lib/components/popover_trigger.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-
   class PopoverTrigger < 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,14 +38,14 @@ module ShadcnPhlexcomponents
         aria: {
           haspopup: "dialog",
           expanded: false,
-          controls: "#{@aria_id}-content"
+          controls: "#{@aria_id}-content",
         },
         data: {
           as_child: @as_child.to_s,
           action: "click->shadcn-phlexcomponents--popover#toggle",
-          "shadcn-phlexcomponents--popover-target": "trigger"
-        }
+          "shadcn-phlexcomponents--popover-target": "trigger",
+        },
       }
     end
   end
-end
+end

data/lib/components/progress.rb

@@ -6,7 +6,7 @@ module ShadcnPhlexcomponents
 
     def initialize(value: 0, **attributes)
       @value = value
-      super(**attributes)    
+      super(**attributes)
     end
 
     def default_attributes
@@ -19,19 +19,19 @@ module ShadcnPhlexcomponents
         },
         data: {
           controller: "shadcn-phlexcomponents--progress",
-          "shadcn-phlexcomponents--progress-progress-value": @value
-        }
+          "shadcn-phlexcomponents--progress-progress-value": @value,
+        },
       }
     end
 
     def view_template
       div(**@attributes) do
         div(
-          class: "h-full w-full flex-1 bg-primary transition-all", 
-          style: "transform: translateX(-#{100-@value}%)", 
-          data: { "shadcn-phlexcomponents--progress-target": "bar"}
+          class: "h-full w-full flex-1 bg-primary transition-all",
+          style: "transform: translateX(-#{100 - @value}%)",
+          data: { "shadcn-phlexcomponents--progress-target": "bar" },
         )
       end
     end
   end
-end
+end

data/lib/components/radio_group.rb

@@ -19,7 +19,7 @@ module ShadcnPhlexcomponents
     def items(collection, value_method:, text_method:, wrapper_class: nil)
       wrapper_class = TAILWIND_MERGER.merge("flex items-center space-x-2 #{wrapper_class}")
 
-      if collection.first && collection.first.is_a?(Hash)
+      if collection.first&.is_a?(Hash)
         collection = convert_collection_hash_to_struct(collection, value_method: value_method, text_method: text_method)
       end
 
@@ -46,7 +46,7 @@ module ShadcnPhlexcomponents
     end
 
     def default_attributes
-      { 
+      {
         role: "radiogroup",
         dir: @dir,
         aria: {
@@ -55,8 +55,8 @@ module ShadcnPhlexcomponents
         data: {
           controller: "shadcn-phlexcomponents--radio-group",
           "shadcn-phlexcomponents--radio-group-selected-value": @value,
-        }
+        },
       }
     end
   end
-end
+end

data/lib/components/radio_group_item.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class RadioGroupItem < Base
-    STYLES = <<~HEREDOC.freeze
+    STYLES = <<~HEREDOC
       aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow
       focus:outline-none focus-visible:ring-1 focus-visible:ring-ring
       disabled:cursor-not-allowed disabled:opacity-50 relative cursor-pointer
@@ -20,8 +20,8 @@ module ShadcnPhlexcomponents
     def view_template(&)
       button(**@attributes) do
         span(
-            class: "items-center justify-center hidden group-data-[checked=true]/radio:flex"
-          ) do
+          class: "items-center justify-center hidden group-data-[checked=true]/radio:flex",
+        ) do
           icon("circle", class: "size-2.5 fill-primary")
         end
 
@@ -33,7 +33,7 @@ module ShadcnPhlexcomponents
           tabindex: -1,
           checked: @checked,
           aria: { hidden: true },
-          data: { input: "" }
+          data: { input: "" },
         )
       end
     end
@@ -46,12 +46,12 @@ module ShadcnPhlexcomponents
         role: "radio",
         aria: {
           checked: @checked.to_s,
-        }, 
+        },
         data: {
           checked: @checked.to_s,
           value: @value,
           "shadcn-phlexcomponents--radio-group-target": "item",
-          action: <<~HEREDOC
+          action: <<~HEREDOC,
             click->shadcn-phlexcomponents--radio-group#setChecked
             keydown.right->shadcn-phlexcomponents--radio-group#setCheckedToNext:prevent
             keydown.down->shadcn-phlexcomponents--radio-group#setCheckedToNext:prevent
@@ -59,8 +59,8 @@ module ShadcnPhlexcomponents
             keydown.left->shadcn-phlexcomponents--radio-group#setCheckedToPrev:prevent
             keydown.enter->shadcn-phlexcomponents--radio-group#preventDefault
           HEREDOC
-        }
+        },
       }
     end
   end
-end
+end

data/lib/components/select.rb

@@ -2,29 +2,29 @@
 
 module ShadcnPhlexcomponents
   class Select < Base
-    STYLES = "w-full".freeze
-    
-    NATIVE_STYLES = <<~HEREDOC.freeze
+    STYLES = "w-full"
+
+    NATIVE_STYLES = <<~HEREDOC
       flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-2 pr-8
       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 appearance-none
-      relative 
+      relative#{" "}
     HEREDOC
-    
-    NATIVE_OPTION_STYLES = "bg-popover text-popover-foreground".freeze
+
+    NATIVE_OPTION_STYLES = "bg-popover text-popover-foreground"
 
     def initialize(id: nil,
-                  name: nil,
-                  value: nil,
-                  placeholder: nil,
-                  side: :bottom,
-                  native: false, 
-                  dir: 'ltr', 
-                  include_blank: false,
-                  disabled: false,
-                  aria_id: "select-#{SecureRandom.hex(5)}", 
-                  **attributes)
+      name: nil,
+      value: nil,
+      placeholder: nil,
+      side: :bottom,
+      native: false,
+      dir: "ltr",
+      include_blank: false,
+      disabled: false,
+      aria_id: "select-#{SecureRandom.hex(5)}",
+      **attributes)
       @id = id || name
       @name = name
       @value = value
@@ -37,43 +37,47 @@ module ShadcnPhlexcomponents
       @aria_id = aria_id
       super(**attributes)
     end
-  
+
     def trigger(**attributes)
       SelectTrigger(
-        id: @id, 
-        aria_id: @aria_id, 
-        dir: @dir, 
-        value: @value, 
-        placeholder: @placeholder, 
+        id: @id,
+        aria_id: @aria_id,
+        dir: @dir,
+        value: @value,
+        placeholder: @placeholder,
         disabled: @disabled,
-        **attributes)
-    end  
+        **attributes,
+      )
+    end
 
     def content(**attributes, &)
-      SelectContent(side: @side, aria_id: @aria_id, dir: @dir, include_blank: @include_blank, native: @native, **attributes, &)
-    end    
+      SelectContent(
+        side: @side, aria_id: @aria_id, dir: @dir, include_blank: @include_blank, native: @native, **attributes, &
+      )
+    end
 
     def item(**attributes, &)
       SelectItem(aria_id: @aria_id, **attributes, &)
-    end 
+    end
 
     def label(**attributes, &)
       SelectLabel(aria_id: @aria_id, **attributes, &)
-    end 
+    end
 
     def group(**attributes, &)
       SelectGroup(aria_id: @aria_id, **attributes, &)
-    end   
-    
+    end
+
     def items(collection)
       SelectTrigger(
-        id: @id, 
-        aria_id: @aria_id, 
-        dir: @dir, 
-        value: @value, 
-        placeholder: @placeholder, 
-        disabled: @disabled)
-      
+        id: @id,
+        aria_id: @aria_id,
+        dir: @dir,
+        value: @value,
+        placeholder: @placeholder,
+        disabled: @disabled,
+      )
+
       SelectContent(aria_id: @aria_id, dir: @dir, include_blank: @include_blank, native: @native) do
         collection.each do |option|
           SelectItem(value: option[:value], aria_id: @aria_id, disabled: option[:disabled]) { option[:name] }
@@ -85,7 +89,7 @@ module ShadcnPhlexcomponents
       content = capture(&)
       element = Nokogiri::HTML.fragment(content.to_s)
       content_element = element.css('[data-shadcn-phlexcomponents--select-target="content"]')
-      
+
       if @native
         div(class: "relative") do
           select(**@attributes) do
@@ -105,21 +109,10 @@ module ShadcnPhlexcomponents
           select(
             name: @name,
             disabled: @disabled,
-            style: { 
-              position: 'absolute',
-              border: '0px',
-              width: '1px',
-              height: '1px',
-              padding: '0px',
-              margin: '-1px',
-              overflow: 'hidden',
-              clip: 'rect(0px, 0px, 0px, 0px)',
-              'white-space': 'nowrap',
-              'overflow-wrap': 'normal'
-            },
+            class: "sr-only",
             data: {
-              "shadcn-phlexcomponents--select-target": "select"
-            }
+              "shadcn-phlexcomponents--select-target": "select",
+            },
           ) do
             option(value: "")
             build_native_options(content_element)
@@ -136,13 +129,12 @@ module ShadcnPhlexcomponents
       end
     end
 
-
     def default_attributes
-      if @native 
-        { 
-          id: @id, 
-          name:@name,
-          disabled: @disabled
+      if @native
+        {
+          id: @id,
+          name: @name,
+          disabled: @disabled,
         }
       else
         {
@@ -150,8 +142,8 @@ module ShadcnPhlexcomponents
             side: @side,
             aria_id: @aria_id,
             controller: "shadcn-phlexcomponents--select",
-            "shadcn-phlexcomponents--select-selected-value": @value
-          }
+            "shadcn-phlexcomponents--select-selected-value": @value,
+          },
         }
       end
     end
@@ -160,30 +152,33 @@ module ShadcnPhlexcomponents
       content_element.children.each do |content_child|
         next if content_child.is_a?(Nokogiri::XML::Text) || content_child.is_a?(Nokogiri::XML::Comment)
 
-        if content_child.attributes['data-shadcn-phlexcomponents--select-target']&.value == 'group'
+        if content_child.attributes["data-shadcn-phlexcomponents--select-target"]&.value == "group"
           group_label = content_child.at_css('[data-shadcn-phlexcomponents--select-target="label"]')&.text
 
-          optgroup(label: group_label, class: NATIVE_OPTION_STYLES) do              
+          optgroup(label: group_label, class: NATIVE_OPTION_STYLES) do
             content_child.css('[data-shadcn-phlexcomponents--select-target="item"]').each do |i|
               option(
-                value: i.attributes['data-value'].value,
+                value: i.attributes["data-value"].value,
                 class: NATIVE_OPTION_STYLES,
-                selected: i.attributes['data-value'].value === @value,
-                disabled: i.attributes['data-disabled']&.value === '') do 
-                  i.text
+                selected: i.attributes["data-value"].value == @value,
+                disabled: i.attributes["data-disabled"]&.value == "",
+              ) do
+                i.text
               end
             end
           end
-        elsif content_child.attributes['data-shadcn-phlexcomponents--select-target']&.value == 'item'
+        elsif content_child.attributes["data-shadcn-phlexcomponents--select-target"]&.value == "item"
 
-          option(value: content_child.attributes['data-value'].value, 
-                class: NATIVE_OPTION_STYLES,
-                selected: content_child.attributes['data-value'].value === @value,
-                disabled: content_child.attributes['data-disabled']&.value === '') do 
+          option(
+            value: content_child.attributes["data-value"].value,
+            class: NATIVE_OPTION_STYLES,
+            selected: content_child.attributes["data-value"].value == @value,
+            disabled: content_child.attributes["data-disabled"]&.value == "",
+          ) do
             content_child.text
           end
         end
       end
     end
   end
-end
+end

data/lib/components/select_content.rb

@@ -2,14 +2,14 @@
 
 module ShadcnPhlexcomponents
   class SelectContent < Base
-    STYLES = <<~HEREDOC.freeze
+    STYLES = <<~HEREDOC
       relative z-50 min-w-[8rem] max-h-108 overflow-y-auto overflow-x-hidden rounded-md border
       bg-popover text-popover-foreground  p-1 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-[side=top]:slide-in-from-bottom-2
-      data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 
+      data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1#{" "}
       data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1
     HEREDOC
 
@@ -23,10 +23,15 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(class: "hidden fixed top-0 left-0 w-max z-50", data: { "shadcn-phlexcomponents--select-target": "contentWrapper" }) do
+      div(
+        class: "hidden fixed top-0 left-0 w-max z-50",
+        data: { "shadcn-phlexcomponents--select-target": "contentWrapper" },
+      ) do
         div(**@attributes) do
           if @include_blank && !@native
-            SelectItem(aria_id: @aria_id, value: "", class: "h-8", hide_icon: true) { @include_blank.is_a?(String) ? @include_blank : "" }
+            SelectItem(aria_id: @aria_id, value: "", class: "h-8", hide_icon: true) do
+              @include_blank.is_a?(String) ? @include_blank : ""
+            end
           end
 
           yield
@@ -42,7 +47,7 @@ module ShadcnPhlexcomponents
         role: "listbox",
         aria: {
           labelledby: "#{@aria_id}-trigger",
-          orientation: "vertical"
+          orientation: "vertical",
         },
         data: {
           state: "closed",
@@ -52,8 +57,8 @@ module ShadcnPhlexcomponents
             keydown.up->shadcn-phlexcomponents--select#focusLastItem:prevent
             keydown.down->shadcn-phlexcomponents--select#focusFirstItem:prevent
           HEREDOC
-        }
+        },
       }
     end
   end
-end
+end

data/lib/components/select_group.rb

@@ -15,9 +15,9 @@ module ShadcnPhlexcomponents
       {
         role: "group",
         data: {
-          "shadcn-phlexcomponents--select-target": "group"
-        }
+          "shadcn-phlexcomponents--select-target": "group",
+        },
       }
     end
   end
-end
+end