shadcn_phlexcomponents 0.1.9 → 0.1.11

data/lib/shadcn_phlexcomponents/components/breadcrumb.rb

@@ -0,0 +1,150 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Breadcrumb < Base
+    class_variants(
+      base: "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+    )
+
+    def item(**attributes, &)
+      BreadcrumbItem(**attributes, &)
+    end
+
+    def link(name = nil, options = nil, html_options = nil, &)
+      BreadcrumbLink(name, options, html_options, &)
+    end
+
+    def separator(**attributes, &)
+      BreadcrumbSeparator(**attributes, &)
+    end
+
+    def page(**attributes, &)
+      BreadcrumbPage(**attributes, &)
+    end
+
+    def ellipsis(**attributes)
+      BreadcrumbEllipsis(**attributes)
+    end
+
+    def links(collection)
+      collection.each_with_index do |link, index|
+        if index == collection.size - 1
+          item do
+            page { link[:name] }
+          end
+        else
+          item do
+            link(link[:name], link[:path])
+          end
+        end
+
+        if index < collection.size - 1
+          separator
+        end
+      end
+
+      nil
+    end
+
+    def view_template(&)
+      nav(aria: { label: "breadcrumb" }) do
+        ol(**@attributes, &)
+      end
+    end
+  end
+
+  class BreadcrumbItem < Base
+    class_variants(base: "inline-flex items-center gap-1.5")
+
+    def view_template(&)
+      li(**@attributes, &)
+    end
+  end
+
+  class BreadcrumbLink < Base
+    class_variants(base: "transition-colors hover:text-foreground")
+
+    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[:class] = class_variants(class: @html_options[:class])
+
+      if block_given?
+        link_to(@options, @html_options, &)
+      else
+        link_to(@name, @options, @html_options)
+      end
+    end
+  end
+
+  class BreadcrumbSeparator < Base
+    class_variants(base: "[&>svg]:size-3.5")
+
+    def default_attributes
+      {
+        role: "presentation",
+        aria: {
+          hidden: "true",
+        },
+      }
+    end
+
+    def view_template(&)
+      li(**@attributes) do
+        if block_given?
+          yield
+        else
+          icon("chevron-right")
+        end
+      end
+    end
+  end
+
+  class BreadcrumbPage < Base
+    class_variants(base: "font-normal text-foreground")
+
+    def default_attributes
+      {
+        role: "link",
+        aria: {
+          disabled: "true",
+          current: "page",
+        },
+      }
+    end
+
+    def view_template(&)
+      span(**@attributes, &)
+    end
+  end
+
+  class BreadcrumbEllipsis < Base
+    class_variants(base: "flex size-9 items-center justify-center")
+
+    def default_attributes
+      {
+        role: "presentation",
+        aria: {
+          hidden: "true",
+        },
+      }
+    end
+
+    def view_template
+      span(**@attributes) do
+        icon("ellipsis", class: "size-4")
+        span(class: "sr-only") { "More" }
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/button.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Button < Base
+    class_variants(
+      base: <<~HEREDOC,
+        inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium
+        transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none
+        [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 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
+      variants: {
+        variant: {
+          default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+          default: "h-9 px-4 py-2 has-[>svg]:px-3",
+          sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+          lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+          icon: "size-9",
+        },
+      },
+      defaults: {
+        variant: :default,
+        size: :default,
+      },
+    )
+
+    def initialize(variant: :default, size: :default, type: :button, **attributes)
+      @class_variants = { variant: variant, size: size }
+      @type = type
+      super(**attributes)
+    end
+
+    def default_attributes
+      { type: @type }
+    end
+
+    def view_template(&)
+      button(**@attributes, &)
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/card.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Card < Base
+    class_variants(base: "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm")
+
+    def header(**attributes, &)
+      CardHeader(**attributes, &)
+    end
+
+    def title(**attributes, &)
+      CardTitle(**attributes, &)
+    end
+
+    def description(**attributes, &)
+      CardDescription(**attributes, &)
+    end
+
+    def action(**attributes, &)
+      CardAction(**attributes, &)
+    end
+
+    def content(**attributes, &)
+      CardContent(**attributes, &)
+    end
+
+    def footer(**attributes, &)
+      CardFooter(**attributes, &)
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class CardHeader < Base
+    class_variants(
+      base: <<~HEREDOC,
+        @container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5
+        px-6 has-data-[shadcn-phlexcomponents=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6
+      HEREDOC
+    )
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class CardTitle < Base
+    class_variants(base: "leading-none font-semibold")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class CardDescription < Base
+    class_variants(base: "text-muted-foreground text-sm")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class CardAction < Base
+    class_variants(base: "col-start-2 row-span-2 row-start-1 self-start justify-self-end")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class CardContent < Base
+    class_variants(base: "px-6")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class CardFooter < Base
+    class_variants(base: "flex items-center px-6 [.border-t]:pt-6")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

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

@@ -2,29 +2,34 @@
 
 module ShadcnPhlexcomponents
   class Checkbox < Base
-    STYLES = <<~HEREDOC
-      peer size-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none
-      focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50
-      data-[checked=true]:bg-primary data-[checked=true]:text-primary-foreground relative
-      cursor-pointer group/checkbox
-    HEREDOC
+    class_variants(
+      base: <<~HEREDOC,
+        peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground
+        dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring
+        focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
+        aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow
+        outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50
+        relative
+      HEREDOC
+    )
 
-    def initialize(name: nil, value: "1", unchecked_value: "0", checked: false, id: nil, include_hidden: true,
+    def initialize(name: nil, value: "1", unchecked_value: "0", checked: false, include_hidden: true,
       **attributes)
       @name = name
       @value = value
       @unchecked_value = unchecked_value
       @checked = checked
-      @id = id || name
       @include_hidden = include_hidden
       super(**attributes)
     end
 
     def view_template(&)
       button(**@attributes) do
-        span(class: "absolute inset-0 items-center justify-center text-current
-                    pointer-events-none hidden group-data-[checked=true]/checkbox:flex") do
-          icon("check", class: "size-4")
+        span(
+          class: "flex items-center justify-center text-current transition-none",
+          data: { checkbox_target: "indicator" },
+        ) do
+          icon("check", class: "size-3.5")
         end
 
         if @include_hidden
@@ -40,7 +45,7 @@ module ShadcnPhlexcomponents
           checked: @checked,
           aria: { hidden: true },
           data: {
-            "checkbox-target": "input",
+            checkbox_target: "input",
           },
         )
       end
@@ -48,7 +53,6 @@ module ShadcnPhlexcomponents
 
     def default_attributes
       {
-        id: @id,
         type: "button",
         role: "checkbox",
         aria: {
@@ -61,7 +65,7 @@ module ShadcnPhlexcomponents
             click->checkbox#toggle
             keydown.enter->checkbox#preventDefault
           HEREDOC
-          "checkbox-checked-value": @checked,
+          checkbox_is_checked_value: @checked,
         },
       }
     end

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

@@ -2,13 +2,12 @@
 
 module ShadcnPhlexcomponents
   class CheckboxGroup < Base
-    STYLES = "space-y-1.5"
+    class_variants(base: "space-y-1.5")
 
-    def initialize(name:, value: [], include_hidden: true, item_id_prefix: nil, **attributes)
+    def initialize(name:, value: [], include_hidden: true, **attributes)
       @name = name
       @value = value
       @include_hidden = include_hidden
-      @item_id_prefix = item_id_prefix
       super(**attributes)
     end
 
@@ -22,10 +21,10 @@ module ShadcnPhlexcomponents
       nil
     end
 
-    def items(collection, value_method:, text_method:, wrapper_class: nil, disabled_items: nil, &)
+    def items(collection, value_method:, text_method:, container_class: nil, disabled_items: nil, id_prefix: nil, &)
       vanish(&)
 
-      @wrapper_class = TAILWIND_MERGER.merge("flex items-center space-x-2 #{wrapper_class}")
+      container_class = TAILWIND_MERGER.merge("flex flex-row items-center gap-2 #{container_class}")
 
       if collection.first&.is_a?(Hash)
         collection = convert_collection_hash_to_struct(collection, value_method: value_method, text_method: text_method)
@@ -35,13 +34,13 @@ module ShadcnPhlexcomponents
         value = item.public_send(value_method)
         text = item.public_send(text_method)
 
-        id = if @item_id_prefix
-          "#{@item_id_prefix.parameterize.underscore}_#{value}"
+        id = if id_prefix
+          "#{id_prefix.parameterize.underscore}_#{value}"
         else
           "#{@name.parameterize.underscore}_#{value}"
         end
 
-        div(class: @wrapper_class) do
+        div(class: container_class) do
           Checkbox(
             name: "#{@name}[]",
             id: id,

data/lib/shadcn_phlexcomponents/components/collapsible.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Collapsible < Base
+    def initialize(open: false, **attributes)
+      @open = open
+      @aria_id = "collapsible-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      CollapsibleTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      CollapsibleContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "collapsible",
+          collapsible_is_open_value: @open.to_s,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class CollapsibleTrigger < Base
+    def initialize(as_child: false, aria_id: nil, **attributes)
+      @as_child = as_child
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        role: "button",
+        aria: {
+          expanded: "false",
+          controls: "#{@aria_id}-content",
+        },
+        data: {
+          state: "closed",
+          action: "click->collapsible#toggle",
+          collapsible_target: "trigger",
+        },
+      }
+    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
+  end
+
+  class CollapsibleContent < Base
+    def initialize(aria_id: :nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        data: {
+          collapsible_target: "content",
+        },
+      }
+    end
+
+    def view_template(&)
+      @class = @attributes.delete(:class)
+      div(class: "#{@class} hidden", **@attributes, &)
+    end
+  end
+end