shadcn_phlexcomponents 0.1.0

data/lib/components/radio_group_item.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class RadioGroupItem < Base
+    STYLES = <<~HEREDOC.freeze
+      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
+      group/radio
+    HEREDOC
+
+    def initialize(name: nil, value: nil, checked: false, id: nil, **attributes)
+      @value = value
+      @name = name
+      @checked = checked
+      @id = id || name
+      super(**attributes)
+    end
+
+    def view_template(&)
+      button(**@attributes) do
+        span(
+            class: "items-center justify-center hidden group-data-[checked=true]/radio:flex"
+          ) do
+          icon("circle", class: "size-2.5 fill-primary")
+        end
+
+        input(
+          type: "radio",
+          value: @value,
+          class: "-translate-x-full pointer-events-none absolute top-0 left-0 size-4 opacity-0",
+          name: @name,
+          tabindex: -1,
+          checked: @checked,
+          aria: { hidden: true },
+          data: { input: "" }
+        )
+      end
+    end
+
+    def default_attributes
+      {
+        id: @id,
+        type: "button",
+        tabindex: -1,
+        role: "radio",
+        aria: {
+          checked: @checked.to_s,
+        }, 
+        data: {
+          checked: @checked.to_s,
+          value: @value,
+          "shadcn-phlexcomponents--radio-group-target": "item",
+          action: <<~HEREDOC
+            click->shadcn-phlexcomponents--radio-group#setChecked
+            keydown.right->shadcn-phlexcomponents--radio-group#setCheckedToNext:prevent
+            keydown.down->shadcn-phlexcomponents--radio-group#setCheckedToNext:prevent
+            keydown.up->shadcn-phlexcomponents--radio-group#setCheckedToPrev:prevent
+            keydown.left->shadcn-phlexcomponents--radio-group#setCheckedToPrev:prevent
+            keydown.enter->shadcn-phlexcomponents--radio-group#preventDefault
+          HEREDOC
+        }
+      }
+    end
+  end
+end

data/lib/components/select.rb

@@ -0,0 +1,189 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Select < Base
+    STYLES = "w-full".freeze
+    
+    NATIVE_STYLES = <<~HEREDOC.freeze
+      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 
+    HEREDOC
+    
+    NATIVE_OPTION_STYLES = "bg-popover text-popover-foreground".freeze
+
+    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)
+      @id = id || name
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @side = side
+      @native = native
+      @dir = dir
+      @include_blank = include_blank
+      @disabled = disabled
+      @aria_id = aria_id
+      super(**attributes)
+    end
+  
+    def trigger(**attributes)
+      SelectTrigger(
+        id: @id, 
+        aria_id: @aria_id, 
+        dir: @dir, 
+        value: @value, 
+        placeholder: @placeholder, 
+        disabled: @disabled,
+        **attributes)
+    end  
+
+    def content(**attributes, &)
+      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 
+
+    def label(**attributes, &)
+      SelectLabel(aria_id: @aria_id, **attributes, &)
+    end 
+
+    def group(**attributes, &)
+      SelectGroup(aria_id: @aria_id, **attributes, &)
+    end   
+    
+    def items(collection)
+      SelectTrigger(
+        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] }
+        end
+      end
+    end
+
+    def view_template(&)
+      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
+            if @placeholder || @include_blank
+              option(value: "", class: NATIVE_OPTION_STYLES) { @placeholder }
+            end
+
+            build_native_options(content_element)
+          end
+
+          icon("chevron-down", class: "size-4 absolute opacity-50 top-1/2 -translate-y-1/2 right-3 pointer-events-none")
+        end
+      else
+        div(**@attributes) do
+          yield
+
+          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'
+            },
+            data: {
+              "shadcn-phlexcomponents--select-target": "select"
+            }
+          ) do
+            option(value: "")
+            build_native_options(content_element)
+          end
+        end
+      end
+    end
+
+    def default_styles
+      if @native
+        NATIVE_STYLES
+      else
+        STYLES
+      end
+    end
+
+
+    def default_attributes
+      if @native 
+        { 
+          id: @id, 
+          name:@name,
+          disabled: @disabled
+        }
+      else
+        {
+          data: {
+            side: @side,
+            aria_id: @aria_id,
+            controller: "shadcn-phlexcomponents--select",
+            "shadcn-phlexcomponents--select-selected-value": @value
+          }
+        }
+      end
+    end
+
+    def build_native_options(content_element)
+      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'
+          group_label = content_child.at_css('[data-shadcn-phlexcomponents--select-target="label"]')&.text
+
+          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,
+                class: NATIVE_OPTION_STYLES,
+                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'
+
+          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

data/lib/components/select_content.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SelectContent < Base
+    STYLES = <<~HEREDOC.freeze
+      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=right]:translate-x-1 data-[side=top]:-translate-y-1
+    HEREDOC
+
+    def initialize(side: :bottom, include_blank: false, native: false, dir: "ltr", aria_id: nil, **attributes)
+      @side = side
+      @include_blank = include_blank
+      @native = native
+      @dir = dir
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      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 : "" }
+          end
+
+          yield
+        end
+      end
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        dir: @dir,
+        tabindex: -1,
+        role: "listbox",
+        aria: {
+          labelledby: "#{@aria_id}-trigger",
+          orientation: "vertical"
+        },
+        data: {
+          state: "closed",
+          side: @side,
+          "shadcn-phlexcomponents--select-target": "content",
+          action: <<~HEREDOC,
+            keydown.up->shadcn-phlexcomponents--select#focusLastItem:prevent
+            keydown.down->shadcn-phlexcomponents--select#focusFirstItem:prevent
+          HEREDOC
+        }
+      }
+    end
+  end
+end

data/lib/components/select_group.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SelectGroup < Base
+    def initialize(aria_id:, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        role: "group",
+        data: {
+          "shadcn-phlexcomponents--select-target": "group"
+        }
+      }
+    end
+  end
+end

data/lib/components/select_item.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SelectItem < Base
+    STYLES = <<~HEREDOC.freeze
+      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 
+      data-[disabled]:opacity-50
+    HEREDOC
+
+    def initialize(value: nil, disabled: false, hide_icon: false, aria_id: nil, **attributes)
+      @value = value
+      @disabled = disabled
+      @aria_id = aria_id
+      @hide_icon = hide_icon
+      @aria_labelledby = "#{@aria_id}-#{@value.dasherize.parameterize}"
+      super(**attributes)
+    end
+
+    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
+            icon("check", class: "size-4")
+          end
+        end
+      end
+    end
+
+    def default_attributes
+      {
+        role: "option",
+        tabindex: -1,
+        aria: {
+          selected: false,
+          labelledby: @aria_labelledby
+        },
+        data: {
+          disabled: @disabled,
+          value: @value,
+          action: <<~HEREDOC,
+            click->shadcn-phlexcomponents--select#selectItem
+            keydown.up->shadcn-phlexcomponents--select#focusPrevItem:prevent:stop
+            keydown.down->shadcn-phlexcomponents--select#focusNextItem:prevent:stop
+            keydown.enter->shadcn-phlexcomponents--select#selectItem:prevent
+            keydown.space->shadcn-phlexcomponents--select#selectItem:prevent
+            mouseover->shadcn-phlexcomponents--select#focusItem
+            mouseout->shadcn-phlexcomponents--select#focusContent
+          HEREDOC
+          "shadcn-phlexcomponents--select-target": "item"
+        }
+      }
+    end
+  end
+end

data/lib/components/select_label.rb

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

data/lib/components/select_trigger.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SelectTrigger < Base
+    STYLES = <<~HEREDOC.freeze
+      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 
+      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
+    HEREDOC
+
+    def initialize(id: nil, value: nil, placeholder: nil, dir: "ltr", 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: { "shadcn-phlexcomponents--select-target": "triggerText" }) { @value || @placeholder } 
+
+        icon("chevron-down", class: "size-4 opacity-50")
+      end
+    end
+
+    def default_attributes
+      {
+        type: "button",
+        id: @id,
+        dir: @dir,
+        role: "combobox",
+        aria: {
+          autocomplete: "none",
+          expanded: false,
+          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
+          HEREDOC
+          "shadcn-phlexcomponents--select-target": "trigger"
+        }
+      }
+    end
+  end
+end

data/lib/components/separator.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Separator < Base
+    ORIENTATIONS = {
+      horizontal: "shrink-0 bg-border h-[1px] w-full",
+      vertical: "shrink-0 bg-border h-full w-[1px]",
+    }.freeze
+
+    def initialize(orientation: :horizontal, **attributes)
+      @orientation = orientation
+      super(**attributes)
+    end
+
+    def default_styles
+      "#{ORIENTATIONS[@orientation]}"
+    end
+
+    def default_attributes
+      {
+        role: "none"
+      }
+    end
+
+    def view_template
+      div(**@attributes)
+    end
+  end
+end

data/lib/components/sheet.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Sheet < Base
+    STYLES = "inline-block".freeze
+
+    def initialize(side: :right, aria_id: "sheet-#{SecureRandom.hex(5)}", **attributes)
+      @side = side
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      SheetTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+       SheetContent(side: @side, aria_id: @aria_id, **attributes, &)
+    end
+
+    def header(**attributes, &)
+      SheetHeader(**attributes, &)
+    end
+
+    def title(**attributes, &)
+       SheetTitle(aria_id: @aria_id, **attributes, &)
+    end
+
+    def description(**attributes, &)
+       SheetDescription(aria_id: @aria_id, **attributes, &)
+    end
+
+    def footer(**attributes, &)
+       SheetFooter(**attributes, &)
+    end
+
+    def close(**attributes, &)
+       SheetClose(**attributes, &)
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "shadcn-phlexcomponents--sheet"
+        }
+      }
+    end
+  end
+end

data/lib/components/sheet_close.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SheetClose < Base
+    def initialize(as_child: false, **attributes)
+      @as_child = as_child
+      super(**attributes)
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+
+        vanish(&)
+        element_attributes = nokogiri_attributes_to_hash(element)
+        styles = TAILWIND_MERGER.merge("#{@attributes[:class]} #{element_attributes[:class]}")
+        merged_attributes = mix(@attributes, element_attributes)
+        merged_attributes[:class] = styles
+
+        if element.name == "button"
+          merged_attributes.delete(:role)
+        end
+
+        send(element.name, **merged_attributes) do        
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        role: "button",
+        data: {
+          action: "click->shadcn-phlexcomponents--sheet#close"
+        }
+      }
+    end
+  end
+end

data/lib/components/sheet_content.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+
+  class SheetContent < Base
+    STYLES = <<~HEREDOC.freeze
+      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
+      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
+      cursor-pointer
+    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",
+      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"
+    }
+
+    def self.default_styles(side)
+      "#{STYLES} #{SIDES[side]}"
+    end
+
+    def initialize(side: :right, aria_id: nil, **attributes)
+      @side = side
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      @class = @attributes.delete(:class)
+      div(class: "#{@class} hidden", **@attributes) do
+        yield
+
+        button(class: CLOSE_BUTTON_STYLES, data: { action: "click->shadcn-phlexcomponents--sheet#close" }) do
+          icon("x", class: "size-4")
+          span(class: "sr-only") { "close" }
+        end
+      end
+    end
+    
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        tabindex: -1,
+        role: "dialog",
+        aria: {
+          describedby: "#{@aria_id}-description",
+          labelledby: "#{@aria_id}-title",
+        },
+        data: {
+          "shadcn-phlexcomponents--sheet-target": "content"
+        }
+      }
+    end
+
+    def default_styles
+      self.class.default_styles(@side)
+    end
+  end
+end

data/lib/components/sheet_description.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class SheetDescription < Base
+    STYLES = "text-sm text-muted-foreground".freeze
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-description"
+      }
+    end
+
+    def view_template(&)
+      p(**@attributes, &)
+    end
+  end
+end