shadcn_phlexcomponents 0.1.17 → 0.1.19

data/lib/shadcn_phlexcomponents/components/avatar.rb

@@ -2,11 +2,14 @@
 
 module ShadcnPhlexcomponents
   class Avatar < Base
-    class_variants(base: "relative flex size-8 shrink-0 overflow-hidden rounded-full")
-
-    def initialize(**attributes)
-      super(**attributes)
-    end
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.avatar&.dig(:root) ||
+        {
+          base: "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        }
+      ),
+    )
 
     def image(**attributes, &)
       AvatarImage(**attributes, &)
@@ -30,7 +33,14 @@ module ShadcnPhlexcomponents
   end
 
   class AvatarImage < Base
-    class_variants(base: "aspect-square size-full")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.avatar&.dig(:image) ||
+        {
+          base: "aspect-square size-full",
+        }
+      ),
+    )
 
     def default_attributes
       {
@@ -46,7 +56,14 @@ module ShadcnPhlexcomponents
   end
 
   class AvatarFallback < Base
-    class_variants(base: "bg-muted flex size-full items-center justify-center rounded-full")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.avatar&.dig(:fallback) ||
+        {
+          base: "bg-muted flex size-full items-center justify-center rounded-full",
+        }
+      ),
+    )
 
     def default_attributes
       {

data/lib/shadcn_phlexcomponents/components/badge.rb

@@ -3,24 +3,29 @@
 module ShadcnPhlexcomponents
   class Badge < Base
     class_variants(
-      base: <<~HEREDOC,
-        inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium
-        w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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
-        transition-[color,box-shadow] overflow-hidden
-      HEREDOC
-      variants: {
-        variant: {
-          default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-          secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-          destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-          outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        },
-      },
-      defaults: {
-        variant: :default,
-      },
+      **(
+        ShadcnPhlexcomponents.configuration.badge ||
+        {
+          base: <<~HEREDOC,
+            inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium
+            w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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
+            transition-[color,box-shadow] overflow-hidden
+          HEREDOC
+          variants: {
+            variant: {
+              default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+              secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+              destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+              outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+            },
+          },
+          defaults: {
+            variant: :default,
+          },
+        }
+      ),
     )
 
     def initialize(variant: :default, **attributes)

data/lib/shadcn_phlexcomponents/components/base.rb

@@ -151,8 +151,8 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          "#{component}-target" => "overlay"
-        }
+          "#{component}-target" => "overlay",
+        },
       )
     end
   end

data/lib/shadcn_phlexcomponents/components/breadcrumb.rb

@@ -3,7 +3,12 @@
 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",
+      **(
+        ShadcnPhlexcomponents.configuration.breadcrumb&.dig(:root) ||
+        {
+          base: "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        }
+      ),
     )
 
     def item(**attributes, &)
@@ -54,7 +59,14 @@ module ShadcnPhlexcomponents
   end
 
   class BreadcrumbItem < Base
-    class_variants(base: "inline-flex items-center gap-1.5")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.breadcrumb&.dig(:item) ||
+        {
+          base: "inline-flex items-center gap-1.5",
+        }
+      ),
+    )
 
     def view_template(&)
       li(**@attributes, &)
@@ -62,7 +74,14 @@ module ShadcnPhlexcomponents
   end
 
   class BreadcrumbLink < Base
-    class_variants(base: "transition-colors hover:text-foreground")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.breadcrumb&.dig(:link) ||
+        {
+          base: "transition-colors hover:text-foreground",
+        }
+      ),
+    )
 
     def initialize(name = nil, options = nil, html_options = nil)
       @name = name
@@ -88,7 +107,14 @@ module ShadcnPhlexcomponents
   end
 
   class BreadcrumbSeparator < Base
-    class_variants(base: "[&>svg]:size-3.5")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.breadcrumb&.dig(:separator) ||
+        {
+          base: "[&>svg]:size-3.5",
+        }
+      ),
+    )
 
     def default_attributes
       {
@@ -111,7 +137,14 @@ module ShadcnPhlexcomponents
   end
 
   class BreadcrumbPage < Base
-    class_variants(base: "font-normal text-foreground")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.breadcrumb&.dig(:page) ||
+        {
+          base: "font-normal text-foreground",
+        }
+      ),
+    )
 
     def default_attributes
       {
@@ -129,7 +162,14 @@ module ShadcnPhlexcomponents
   end
 
   class BreadcrumbEllipsis < Base
-    class_variants(base: "flex size-9 items-center justify-center")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.breadcrumb&.dig(:ellipsis) ||
+        {
+          base: "flex size-9 items-center justify-center",
+        }
+      ),
+    )
 
     def default_attributes
       {

data/lib/shadcn_phlexcomponents/components/button.rb

@@ -3,33 +3,38 @@
 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,
-      },
+      **(
+        ShadcnPhlexcomponents.configuration.button ||
+        {
+          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)

data/lib/shadcn_phlexcomponents/components/card.rb

@@ -2,7 +2,14 @@
 
 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")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.card&.dig(:root) ||
+        {
+          base: "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        }
+      ),
+    )
 
     def header(**attributes, &)
       CardHeader(**attributes, &)
@@ -35,10 +42,15 @@ module ShadcnPhlexcomponents
 
   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
+      **(
+        ShadcnPhlexcomponents.configuration.card&.dig(:header) ||
+        {
+          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(&)
@@ -47,7 +59,14 @@ module ShadcnPhlexcomponents
   end
 
   class CardTitle < Base
-    class_variants(base: "leading-none font-semibold")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.card&.dig(:title) ||
+        {
+          base: "leading-none font-semibold",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -55,7 +74,14 @@ module ShadcnPhlexcomponents
   end
 
   class CardDescription < Base
-    class_variants(base: "text-muted-foreground text-sm")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.card&.dig(:description) ||
+        {
+          base: "text-muted-foreground text-sm",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -63,7 +89,14 @@ module ShadcnPhlexcomponents
   end
 
   class CardAction < Base
-    class_variants(base: "col-start-2 row-span-2 row-start-1 self-start justify-self-end")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.card&.dig(:action) ||
+        {
+          base: "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -71,7 +104,16 @@ module ShadcnPhlexcomponents
   end
 
   class CardContent < Base
-    class_variants(base: "px-6")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.card&.dig(:content) ||
+        {
+          base: "px-6",
+        }
+      ),
+    )
+
+    class_variants(base: "")
 
     def view_template(&)
       div(**@attributes, &)
@@ -79,7 +121,14 @@ module ShadcnPhlexcomponents
   end
 
   class CardFooter < Base
-    class_variants(base: "flex items-center px-6 [.border-t]:pt-6")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.card&.dig(:footer) ||
+        {
+          base: "flex items-center px-6 [.border-t]:pt-6",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)

data/lib/shadcn_phlexcomponents/components/checkbox.rb

@@ -3,14 +3,19 @@
 module ShadcnPhlexcomponents
   class Checkbox < Base
     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
+      **(
+        ShadcnPhlexcomponents.configuration.checkbox&.dig(:root) ||
+        {
+          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, include_hidden: true,
@@ -23,14 +28,28 @@ module ShadcnPhlexcomponents
       super(**attributes)
     end
 
+    def default_attributes
+      {
+        type: "button",
+        role: "checkbox",
+        aria: {
+          checked: @checked.to_s,
+        },
+        data: {
+          checked: @checked.to_s,
+          controller: "checkbox",
+          action: <<~HEREDOC,
+            click->checkbox#toggle
+            keydown.enter->checkbox#preventDefault
+          HEREDOC
+          checkbox_is_checked_value: @checked,
+        },
+      }
+    end
+
     def view_template(&)
       button(**@attributes) do
-        span(
-          class: "flex items-center justify-center text-current transition-none",
-          data: { checkbox_target: "indicator" },
-        ) do
-          icon("check", class: "size-3.5")
-        end
+        CheckboxIndicator()
 
         if @include_hidden
           input(name: @name, type: "hidden", value: @unchecked_value, autocomplete: "off")
@@ -50,24 +69,26 @@ module ShadcnPhlexcomponents
         )
       end
     end
+  end
+
+  class CheckboxIndicator < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.checkbox&.dig(:indicator) ||
+        {
+          base: "flex items-center justify-center text-current transition-none",
+        }
+      ),
+    )
 
     def default_attributes
-      {
-        type: "button",
-        role: "checkbox",
-        aria: {
-          checked: @checked.to_s,
-        },
-        data: {
-          checked: @checked.to_s,
-          controller: "checkbox",
-          action: <<~HEREDOC,
-            click->checkbox#toggle
-            keydown.enter->checkbox#preventDefault
-          HEREDOC
-          checkbox_is_checked_value: @checked,
-        },
-      }
+      { data: { checkbox_target: "indicator" } }
+    end
+
+    def view_template(&)
+      span(**@attributes) do
+        icon("check", class: "size-3.5")
+      end
     end
   end
 end

data/lib/shadcn_phlexcomponents/components/checkbox_group.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class CheckboxGroup < Base
-    class_variants(base: "space-y-1.5")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.checkbox_group&.dig(:root) ||
+        {
+          base: "space-y-1.5",
+        }
+      ),
+    )
 
     def initialize(name:, value: [], include_hidden: true, **attributes)
       @name = name
@@ -24,8 +31,6 @@ module ShadcnPhlexcomponents
     def items(collection, value_method:, text_method:, container_class: nil, disabled_items: nil, id_prefix: nil, &)
       vanish(&)
 
-      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)
       end
@@ -40,7 +45,7 @@ module ShadcnPhlexcomponents
           "#{@name.parameterize.underscore}_#{value}"
         end
 
-        div(class: container_class) do
+        CheckboxGroupItemContainer(class: container_class) do
           Checkbox(
             name: "#{@name}[]",
             id: id,
@@ -73,4 +78,19 @@ module ShadcnPhlexcomponents
       end
     end
   end
+
+  class CheckboxGroupItemContainer < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.checkbox_group&.dig(:item_container) ||
+        {
+          base: "flex flex-row items-center gap-2",
+        }
+      ),
+    )
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
 end