shadcn_phlexcomponents 0.1.0 → 0.1.2

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

data/lib/components/select_item.rb

@@ -2,10 +2,10 @@
 
 module ShadcnPhlexcomponents
   class SelectItem < Base
-    STYLES = <<~HEREDOC.freeze
+    STYLES = <<~HEREDOC
       group/item relative flex w-full cursor-default select-none items-center
       rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent
-      focus:text-accent-foreground data-[disabled]:pointer-events-none 
+      focus:text-accent-foreground data-[disabled]:pointer-events-none#{" "}
       data-[disabled]:opacity-50
     HEREDOC
 
@@ -21,9 +21,10 @@ module ShadcnPhlexcomponents
     def view_template(&)
       div(**@attributes) do
         span(id: @aria_labelledby, &)
-        
+
         unless @hide_icon
-          span(class: "absolute right-2 h-3.5 w-3.5 items-center hidden justify-center group-aria-[selected=true]/item:flex") do
+          span(class: "absolute right-2 h-3.5 w-3.5 items-center hidden justify-center
+                      group-aria-[selected=true]/item:flex") do
             icon("check", class: "size-4")
           end
         end
@@ -36,7 +37,7 @@ module ShadcnPhlexcomponents
         tabindex: -1,
         aria: {
           selected: false,
-          labelledby: @aria_labelledby
+          labelledby: @aria_labelledby,
         },
         data: {
           disabled: @disabled,
@@ -50,9 +51,9 @@ module ShadcnPhlexcomponents
             mouseover->shadcn-phlexcomponents--select#focusItem
             mouseout->shadcn-phlexcomponents--select#focusContent
           HEREDOC
-          "shadcn-phlexcomponents--select-target": "item"
-        }
+          "shadcn-phlexcomponents--select-target": "item",
+        },
       }
     end
   end
-end
+end

data/lib/components/select_label.rb

@@ -1,13 +1,14 @@
 # frozen_string_literal: true
+
 module ShadcnPhlexcomponents
   class SelectLabel < Base
-    STYLES = "px-2 py-1.5 text-sm font-semibold".freeze
+    STYLES = "px-2 py-1.5 text-sm font-semibold"
 
     def initialize(aria_id: nil, **attributes)
       @aria_id = aria_id
       super(**attributes)
     end
-    
+
     def view_template(&)
       div(**@attributes, &)
     end
@@ -15,9 +16,9 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          "shadcn-phlexcomponents--select-target": "label"
-        }
+          "shadcn-phlexcomponents--select-target": "label",
+        },
       }
     end
   end
-end
+end

data/lib/components/select_trigger.rb

@@ -2,9 +2,9 @@
 
 module ShadcnPhlexcomponents
   class SelectTrigger < Base
-    STYLES = <<~HEREDOC.freeze
+    STYLES = <<~HEREDOC
       flex h-9 items-center justify-between whitespace-nowrap rounded-md border
-      border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background 
+      border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background#{" "}
       data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1
       focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1
       w-full cursor-pointer
@@ -21,7 +21,9 @@ module ShadcnPhlexcomponents
 
     def view_template
       button(**@attributes) do
-        span(class: "pointer-events-none", data: { "shadcn-phlexcomponents--select-target": "triggerText" }) { @value || @placeholder } 
+        span(class: "pointer-events-none", data: { "shadcn-phlexcomponents--select-target": "triggerText" }) do
+          @value || @placeholder
+        end
 
         icon("chevron-down", class: "size-4 opacity-50")
       end
@@ -36,19 +38,19 @@ module ShadcnPhlexcomponents
         aria: {
           autocomplete: "none",
           expanded: false,
-          controls: "#{@aria_id}-content"
+          controls: "#{@aria_id}-content",
         },
         data: {
           placeholder: @placeholder.present?,
           placeholder_text: @placeholder,
           action: <<~HEREDOC,
-          click->shadcn-phlexcomponents--select#toggle
-          keydown.down->shadcn-phlexcomponents--select#toggle:prevent
-          keydown.up->shadcn-phlexcomponents--select#toggle:prevent
+            click->shadcn-phlexcomponents--select#toggle
+            keydown.down->shadcn-phlexcomponents--select#toggle:prevent
+            keydown.up->shadcn-phlexcomponents--select#toggle:prevent
           HEREDOC
-          "shadcn-phlexcomponents--select-target": "trigger"
-        }
+          "shadcn-phlexcomponents--select-target": "trigger",
+        },
       }
     end
   end
-end
+end

data/lib/components/separator.rb

@@ -13,12 +13,12 @@ module ShadcnPhlexcomponents
     end
 
     def default_styles
-      "#{ORIENTATIONS[@orientation]}"
+      ORIENTATIONS[@orientation].to_s
     end
 
     def default_attributes
       {
-        role: "none"
+        role: "none",
       }
     end
 
@@ -26,4 +26,4 @@ module ShadcnPhlexcomponents
       div(**@attributes)
     end
   end
-end
+end

data/lib/components/sheet.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Sheet < Base
-    STYLES = "inline-block".freeze
+    STYLES = "inline-block"
 
     def initialize(side: :right, aria_id: "sheet-#{SecureRandom.hex(5)}", **attributes)
       @side = side
@@ -15,7 +15,7 @@ module ShadcnPhlexcomponents
     end
 
     def content(**attributes, &)
-       SheetContent(side: @side, aria_id: @aria_id, **attributes, &)
+      SheetContent(side: @side, aria_id: @aria_id, **attributes, &)
     end
 
     def header(**attributes, &)
@@ -23,19 +23,19 @@ module ShadcnPhlexcomponents
     end
 
     def title(**attributes, &)
-       SheetTitle(aria_id: @aria_id, **attributes, &)
+      SheetTitle(aria_id: @aria_id, **attributes, &)
     end
 
     def description(**attributes, &)
-       SheetDescription(aria_id: @aria_id, **attributes, &)
+      SheetDescription(aria_id: @aria_id, **attributes, &)
     end
 
     def footer(**attributes, &)
-       SheetFooter(**attributes, &)
+      SheetFooter(**attributes, &)
     end
 
     def close(**attributes, &)
-       SheetClose(**attributes, &)
+      SheetClose(**attributes, &)
     end
 
     def view_template(&)
@@ -45,9 +45,9 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          controller: "shadcn-phlexcomponents--sheet"
-        }
+          controller: "shadcn-phlexcomponents--sheet",
+        },
       }
     end
   end
-end
+end

data/lib/components/sheet_close.rb

@@ -22,7 +22,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
@@ -34,9 +34,9 @@ module ShadcnPhlexcomponents
       {
         role: "button",
         data: {
-          action: "click->shadcn-phlexcomponents--sheet#close"
-        }
+          action: "click->shadcn-phlexcomponents--sheet#close",
+        },
       }
     end
   end
-end
+end

data/lib/components/sheet_content.rb

@@ -1,15 +1,14 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-
   class SheetContent < Base
-    STYLES = <<~HEREDOC.freeze
+    STYLES = <<~HEREDOC
       fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out
       data-[state=closed]:duration-300 data-[state=open]:duration-500
       data-[state=open]:animate-in data-[state=closed]:animate-out
     HEREDOC
 
-    CLOSE_BUTTON_STYLES = <<~HEREDOC.freeze
+    CLOSE_BUTTON_STYLES = <<~HEREDOC
       absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background
       transition-opacity hover:opacity-100 focus:outline-none focus:ring-2
       focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none
@@ -17,16 +16,15 @@ module ShadcnPhlexcomponents
     HEREDOC
 
     SIDES = {
-      left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-      right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left
+            data-[state=open]:slide-in-from-left sm:max-w-sm",
+      right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right
+            data-[state=open]:slide-in-from-right sm:max-w-sm",
       top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-      bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+      bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom
+            data-[state=open]:slide-in-from-bottom",
     }
 
-    def self.default_styles(side)
-      "#{STYLES} #{SIDES[side]}"
-    end
-
     def initialize(side: :right, aria_id: nil, **attributes)
       @side = side
       @aria_id = aria_id
@@ -44,7 +42,7 @@ module ShadcnPhlexcomponents
         end
       end
     end
-    
+
     def default_attributes
       {
         id: "#{@aria_id}-content",
@@ -55,13 +53,13 @@ module ShadcnPhlexcomponents
           labelledby: "#{@aria_id}-title",
         },
         data: {
-          "shadcn-phlexcomponents--sheet-target": "content"
-        }
+          "shadcn-phlexcomponents--sheet-target": "content",
+        },
       }
     end
 
     def default_styles
-      self.class.default_styles(@side)
+      "#{STYLES} #{SIDES[@side]}"
     end
   end
-end
+end

data/lib/components/sheet_description.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class SheetDescription < Base
-    STYLES = "text-sm text-muted-foreground".freeze
+    STYLES = "text-sm text-muted-foreground"
 
     def initialize(aria_id: nil, **attributes)
       @aria_id = aria_id
@@ -11,7 +11,7 @@ module ShadcnPhlexcomponents
 
     def default_attributes
       {
-        id: "#{@aria_id}-description"
+        id: "#{@aria_id}-description",
       }
     end
 
@@ -19,4 +19,4 @@ module ShadcnPhlexcomponents
       p(**@attributes, &)
     end
   end
-end
+end

data/lib/components/sheet_footer.rb

@@ -2,10 +2,10 @@
 
 module ShadcnPhlexcomponents
   class SheetFooter < Base
-    STYLES = "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2".freeze
+    STYLES = "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
 
     def view_template(&)
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/sheet_header.rb

@@ -2,10 +2,10 @@
 
 module ShadcnPhlexcomponents
   class SheetHeader < Base
-    STYLES = "flex flex-col space-y-2 text-center sm:text-left".freeze
+    STYLES = "flex flex-col space-y-2 text-center sm:text-left"
 
     def view_template(&)
       div(**@attributes, &)
     end
   end
-end
+end

data/lib/components/sheet_title.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class SheetTitle < Base
-    STYLES = "text-lg font-semibold text-foreground".freeze
+    STYLES = "text-lg font-semibold text-foreground"
 
     def initialize(aria_id: nil, **attributes)
       @aria_id = aria_id
@@ -11,7 +11,7 @@ module ShadcnPhlexcomponents
 
     def default_attributes
       {
-        id: "#{@aria_id}-title"
+        id: "#{@aria_id}-title",
       }
     end
 
@@ -19,4 +19,4 @@ module ShadcnPhlexcomponents
       h2(**@attributes, &)
     end
   end
-end
+end