shadcn_phlexcomponents 0.1.9 → 0.1.11

data/lib/shadcn_phlexcomponents/components/{form/form.rb → form.rb}

@@ -1,5 +1,19 @@
 # frozen_string_literal: true
 
+require_relative "form/form_helpers"
+require_relative "form/form_input"
+require_relative "form/form_hint"
+require_relative "form/form_error"
+require_relative "form/form_textarea"
+require_relative "form/form_checkbox"
+require_relative "form/form_switch"
+require_relative "form/form_checkbox_group"
+require_relative "form/form_date_picker"
+require_relative "form/form_date_range_picker"
+require_relative "form/form_select"
+require_relative "form/form_radio_group"
+require_relative "form/form_slider"
+
 module ShadcnPhlexcomponents
   class Form < Base
     include Phlex::Rails::Helpers::FormWith
@@ -73,11 +87,15 @@ module ShadcnPhlexcomponents
       FormDatePicker(method, model: @model, object_name: @object_name, **attributes, &)
     end
 
-    def date_range_picker(start_date_method = nil, end_date_method = nil, **attributes, &)
-      FormDateRangePicker(start_date_method, end_date_method, model: @model, object_name: @object_name, **attributes, &)
+    def date_range_picker(method = nil, end_method = nil, **attributes, &)
+      FormDateRangePicker(method, end_method, model: @model, object_name: @object_name, **attributes, &)
+    end
+
+    def slider(method = nil, end_method = nil, **attributes, &)
+      FormSlider(method, end_method, model: @model, object_name: @object_name, **attributes, &)
     end
 
-    def submit(value = nil, variant: :primary, **attributes, &)
+    def submit(value = nil, variant: :default, **attributes, &)
       if @loading
         LoadingButton(variant: variant, type: :submit, **attributes) do
           if block_given?
@@ -110,7 +128,7 @@ module ShadcnPhlexcomponents
     # Follows rails f.submit
     # https://github.com/rails/rails/blob/3235827585d87661942c91bc81f64f56d710f0b2/actionview/lib/action_view/helpers/form_helper.rb#L2681-L2706
     def submit_default_value
-      object = @model&.to_model
+      object = @model.respond_to?(:to_model) ? @model.to_model : nil
       key    = if object
         object.persisted? ? :update : :create
       else

data/lib/shadcn_phlexcomponents/components/hover_card.rb

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class HoverCard < Base
+    class_variants(base: "inline-block max-w-fit")
+
+    def initialize(open: false, **attributes)
+      @open = open
+      super(**attributes)
+    end
+
+    def content(**attributes, &)
+      HoverCardContent(**attributes, &)
+    end
+
+    def trigger(**attributes, &)
+      HoverCardTrigger(**attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "hover-card",
+          hover_card_is_open_value: @open.to_s,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class HoverCardTrigger < 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(&)
+        merged_attributes = merged_as_child_attributes(element, @attributes)
+
+        send(element.name, **merged_attributes) do
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        id: @id,
+        role: "button",
+        data: {
+          as_child: @as_child.to_s,
+          hover_card_target: "trigger",
+          action: <<~HEREDOC,
+            focus->hover-card#open
+            blur->hover-card#close
+            click->hover-card#open
+          HEREDOC
+        },
+      }
+    end
+  end
+
+  class HoverCardContent < Base
+    class_variants(
+      base: <<~HEREDOC,
+        bg-popover text-popover-foreground 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 z-50 w-64
+        origin-(--radix-popper-transform-origin) rounded-md border p-4 shadow-md outline-hidden
+      HEREDOC
+    )
+
+    def initialize(side: :bottom, align: :center, **attributes)
+      @side = side
+      @align = align
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(
+        class: "hidden fixed top-0 left-0 w-max z-50",
+        data: { hover_card_target: "contentContainer" },
+      ) do
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        tabindex: -1,
+        data: {
+          side: @side,
+          align: @align,
+          hover_card_target: "content",
+          action: "mouseover->hover-card#open mouseout->hover-card#close",
+        },
+      }
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/input.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Input < Base
+    class_variants(
+      base: <<~HEREDOC,
+        file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground
+        dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base
+        shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent
+        file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
+        focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
+        aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
+      HEREDOC
+    )
+
+    def initialize(type: :text, **attributes)
+      @type = type
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        type: @type,
+      }
+    end
+
+    def view_template(&)
+      input(**@attributes, &)
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/label.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Label < Base
+    class_variants(
+      base: <<~HEREDOC,
+        flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none
+        group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50
+      HEREDOC
+    )
+
+    def view_template(&)
+      label(**@attributes, &)
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/{link/link.rb → link.rb}

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Link < Base
-    STYLES = "font-medium underline underline-offset-4"
+    class_variants(base: "font-medium underline underline-offset-4")
 
     def initialize(name = nil, options = nil, html_options = nil)
       @name = name
@@ -15,9 +15,16 @@ module ShadcnPhlexcomponents
         @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]}")
+      variant = @html_options.delete(:variant)
+      size = @html_options.delete(:size) || :default
+
+      @html_options[:class] = if variant
+        Button.new.class_variants(variant: variant, size: size, class: @html_options[:class])
+      else
+        class_variants(class: @html_options[:class])
+      end
 
       if block_given?
         link_to(@options, @html_options, &)

data/lib/shadcn_phlexcomponents/components/{loading_button/loading_button.rb → loading_button.rb}

@@ -1,7 +1,14 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-  class LoadingButton < Button
+  class LoadingButton < Base
+    def initialize(variant: :default, size: :default, type: :submit, **attributes)
+      @variant = variant
+      @size = size
+      @type = type
+      super(**attributes)
+    end
+
     def default_attributes
       {
         type: @type,
@@ -12,7 +19,7 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      button(**@attributes) do
+      Button(variant: @variant, size: @size, **@attributes) do
         icon("loader-circle", class: "animate-spin hidden group-aria-busy:inline")
         yield
       end

data/lib/shadcn_phlexcomponents/components/pagination.rb

@@ -0,0 +1,166 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Pagination < Base
+    class_variants(base: "mx-auto flex w-full justify-center")
+
+    def item(**attributes, &)
+      PaginationItem(**attributes, &)
+    end
+
+    def link(name = nil, options = nil, html_options = nil, &)
+      PaginationLink(name, options, html_options, &)
+    end
+
+    def previous(options = nil, html_options = nil)
+      PaginationPrevious(options, html_options)
+    end
+
+    def next(options = nil, html_options = nil)
+      PaginationNext(options, html_options)
+    end
+
+    def ellipsis(**attributes, &)
+      PaginationEllipsis(**attributes, &)
+    end
+
+    def default_attributes
+      {
+        role: "navigation",
+        aria: {
+          label: "navigation",
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes) do
+        ul(class: "flex flex-row items-center gap-1", &)
+      end
+    end
+  end
+
+  class PaginationItem < Base
+    def view_template(&)
+      li(**@attributes, &)
+    end
+  end
+
+  class PaginationPrevious < Base
+    class_variants(base: "gap-1 px-2.5 sm:pl-2.5")
+
+    def initialize(options = nil, html_options = nil)
+      @options = options
+      @html_options = html_options
+    end
+
+    def default_attributes
+      {
+        aria: {
+          label: "Go to previous page",
+        },
+      }
+    end
+
+    def view_template
+      @html_options ||= {}
+      @html_options = mix(default_attributes, @html_options)
+      @html_options[:class] = class_variants(clase: @html_options[:class])
+      @html_options[:size] = :default
+
+      PaginationLink(@options, @html_options) do
+        icon("chevron-left")
+        span(class: "hidden sm:block") { "Previous" }
+      end
+    end
+  end
+
+  class PaginationNext < Base
+    class_variants(base: "gap-1 px-2.5 sm:pr-2.5")
+
+    def initialize(options = nil, html_options = nil)
+      @options = options
+      @html_options = html_options
+    end
+
+    def default_attributes
+      {
+        aria: {
+          label: "Go to next page",
+        },
+      }
+    end
+
+    def view_template
+      @html_options ||= {}
+      @html_options = mix(default_attributes, @html_options)
+      @html_options[:class] = class_variants(clase: @html_options[:class])
+      @html_options[:size] = :default
+
+      PaginationLink(@options, @html_options) do
+        span(class: "hidden sm:block") { "Next" }
+        icon("chevron-right")
+      end
+    end
+  end
+
+  class PaginationLink < Base
+    def initialize(name = nil, options = nil, html_options = nil)
+      @name = name
+      @options = options
+      @html_options = html_options
+    end
+
+    def view_template(&)
+      if block_given?
+        @html_options = @options
+        @options = @name
+      end
+
+      @html_options ||= {}
+      @html_options = mix(default_attributes, @html_options)
+
+      active = @html_options.delete(:active)
+      size = @html_options.delete(:size)
+
+      if active
+        @html_options = mix({ aria: { current: "page" } }, @html_options)
+      end
+
+      @html_options[:class] = Button.new.class_variants(
+        variant: active ? :outline : :ghost,
+        size: size || :icon,
+        class: @html_options[:class],
+      )
+
+      if block_given?
+        li do
+          link_to(@options, @html_options, &)
+        end
+      else
+        li do
+          link_to(@name, @options, @html_options)
+        end
+      end
+    end
+  end
+
+  class PaginationEllipsis < Base
+    class_variants(base: "flex size-9 items-center justify-center")
+
+    def default_attributes
+      {
+        aria: {
+          hidden: "true",
+        },
+      }
+    end
+
+    def view_template
+      span(**@attributes) do
+        icon("ellipsis", class: "size-4")
+        span(class: "sr-only") { "More pages" }
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/popover.rb

@@ -0,0 +1,116 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Popover < Base
+    class_variants(base: "inline-block max-w-fit")
+
+    def initialize(open: false, **attributes)
+      @open = open
+      @aria_id = "popover-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      PopoverTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      PopoverContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "popover",
+          popover_is_open_value: @open.to_s,
+          side: @side,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class PopoverTrigger < Base
+    def initialize(as_child: false, aria_id: nil, **attributes)
+      @as_child = as_child
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+        vanish(&)
+        merged_attributes = merged_as_child_attributes(element, @attributes)
+
+        send(element.name, **merged_attributes) do
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        role: "button",
+        aria: {
+          haspopup: "dialog",
+          expanded: false,
+          controls: "#{@aria_id}-content",
+        },
+        data: {
+          as_child: @as_child.to_s,
+          action: "click->popover#toggle",
+          popover_target: "trigger",
+        },
+      }
+    end
+  end
+
+  class PopoverContent < Base
+    class_variants(
+      base: <<~HEREDOC,
+        bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popper-transform-origin) rounded-md
+        border p-4 shadow-md outline-hidden
+      HEREDOC
+    )
+
+    def initialize(side: :bottom, align: :center, aria_id: nil, **attributes)
+      @side = side
+      @align = align
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(
+        class: "hidden fixed top-0 left-0 w-max z-50",
+        data: { popover_target: "contentContainer" },
+      ) do
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        tabindex: -1,
+        role: "dialog",
+        data: {
+          side: @side,
+          align: @align,
+          popover_target: "content",
+          action: "popover:click:outside->popover#clickOutside",
+        },
+      }
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/{progress/progress.rb → progress.rb}

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Progress < Base
-    STYLES = "relative h-2 w-full overflow-hidden rounded-full bg-primary/20"
+    class_variants(base: "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full")
 
     def initialize(value: 0, **attributes)
       @value = value
@@ -19,7 +19,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           controller: "progress",
-          "progress-progress-value": @value,
+          progress_percent_value: @value,
         },
       }
     end
@@ -27,9 +27,9 @@ module ShadcnPhlexcomponents
     def view_template
       div(**@attributes) do
         div(
-          class: "h-full w-full flex-1 bg-primary transition-all",
+          class: "bg-primary h-full w-full flex-1 transition-all",
           style: "transform: translateX(-#{100 - @value}%)",
-          data: { "progress-target": "bar" },
+          data: { progress_target: "indicator" },
         )
       end
     end