shadcn_phlexcomponents 0.1.18 → 0.1.19

data/lib/shadcn_phlexcomponents/components/progress.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class Progress < Base
-    class_variants(base: "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.progress&.dig(:root) ||
+        {
+          base: "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        }
+      ),
+    )
 
     def initialize(value: 0, **attributes)
       @value = value
@@ -26,12 +33,36 @@ module ShadcnPhlexcomponents
 
     def view_template
       div(**@attributes) do
-        div(
-          class: "bg-primary h-full w-full flex-1 transition-all",
-          style: "transform: translateX(-#{100 - @value}%)",
-          data: { progress_target: "indicator" },
-        )
+        ProgressIndicator(value: @value)
       end
     end
   end
+
+  class ProgressIndicator < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.progress&.dig(:indicator) ||
+        {
+          base: "bg-primary h-full w-full flex-1 transition-all",
+        }
+      ),
+    )
+
+    def initialize(value: nil, **attributes)
+      @value = value
+      super(**attributes)
+    end
+
+    def default_attributes
+      value = @value || 0
+      {
+        style: "transform: translateX(-#{100 - value}%)",
+        data: { progress_target: "indicator" },
+      }
+    end
+
+    def view_template
+      div(**@attributes)
+    end
+  end
 end

data/lib/shadcn_phlexcomponents/components/radio_group.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class RadioGroup < Base
-    class_variants(base: "grid gap-3 outline-none")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.radio_group&.dig(:root) ||
+        {
+          base: "grid gap-3 outline-none",
+        }
+      ),
+    )
 
     def initialize(name: nil, value: nil, dir: "ltr", include_hidden: true, **attributes)
       @name = name
@@ -87,12 +94,17 @@ module ShadcnPhlexcomponents
 
   class RadioGroupItem < Base
     class_variants(
-      base: <<~HEREDOC,
-        border-input text-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 dark:bg-input/30 aspect-square size-4
-        shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
-        disabled:cursor-not-allowed disabled:opacity-50 relative
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.radio_group&.dig(:item) ||
+        {
+          base: <<~HEREDOC,
+            border-input text-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 dark:bg-input/30 aspect-square size-4
+            shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
+            disabled:cursor-not-allowed disabled:opacity-50 relative
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(name: nil, value: nil, checked: false, **attributes)
@@ -104,14 +116,7 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       button(**@attributes) do
-        span(
-          class: "relative flex items-center justify-center",
-          data: {
-            radio_group_target: "indicator",
-          },
-        ) do
-          icon("circle", class: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2")
-        end
+        RadioGroupItemIndicator()
 
         input(
           type: "radio",
@@ -152,4 +157,25 @@ module ShadcnPhlexcomponents
       }
     end
   end
+
+  class RadioGroupItemIndicator < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.radio_group&.dig(:item_indicator) ||
+        {
+          base: "relative flex items-center justify-center",
+        }
+      ),
+    )
+
+    def default_attributes
+      { data: { radio_group_target: "indicator" } }
+    end
+
+    def view_template(&)
+      span(**@attributes) do
+        icon("circle", class: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2")
+      end
+    end
+  end
 end

data/lib/shadcn_phlexcomponents/components/select.rb

@@ -178,17 +178,22 @@ module ShadcnPhlexcomponents
 
   class SelectTrigger < Base
     class_variants(
-      base: <<~HEREDOC,
-        border-input [&_svg:not([class*='text-'])]:text-muted-foreground
-        focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
-        aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex items-center
-        justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs
-        transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50
-        data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[select-target=triggerText]:line-clamp-1#{" "}
-        *:data-[select-target=triggerText]:flex *:data-[select-target=triggerText]:items-center *:data-[select-target=triggerText]:gap-2
-        [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
-        data-[placeholder]:data-[has-value=false]:text-muted-foreground w-full
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.select&.dig(:trigger) ||
+        {
+          base: <<~HEREDOC,
+            border-input [&_svg:not([class*='text-'])]:text-muted-foreground
+            focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
+            aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex items-center
+            justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs
+            transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50
+            data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[select-target=triggerText]:line-clamp-1#{" "}
+            *:data-[select-target=triggerText]:flex *:data-[select-target=triggerText]:items-center *:data-[select-target=triggerText]:gap-2
+            [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
+            data-[placeholder]:data-[has-value=false]:text-muted-foreground w-full
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(id: nil, value: nil, placeholder: nil, aria_id: nil, **attributes)
@@ -236,14 +241,19 @@ module ShadcnPhlexcomponents
 
   class SelectContent < 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 relative z-50
-        max-h-(--radix-popper-available-height) min-w-[8rem] origin-(--radix-popper-transform-origin)
-        overflow-x-hidden overflow-y-auto rounded-md border shadow-md p-1 pointer-events-auto outline-none
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.select&.dig(:content) ||
+        {
+          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 relative z-50
+            max-h-(--radix-popper-available-height) min-w-[8rem] origin-(--radix-popper-transform-origin)
+            overflow-x-hidden overflow-y-auto rounded-md border shadow-md p-1 pointer-events-auto outline-none
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(include_blank: false, native: false, side: :bottom, align: :center, aria_id: nil, **attributes)
@@ -256,11 +266,7 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(
-        style: { display: "none" },
-        class: "fixed top-0 left-0 w-max z-50",
-        data: { select_target: "contentContainer" },
-      ) do
+      SelectContentContainer do
         div(**@attributes) do
           if @include_blank && !@native
             SelectItem(aria_id: @aria_id, value: "", class: "h-8") do
@@ -299,13 +305,14 @@ module ShadcnPhlexcomponents
 
   class SelectLabel < Base
     class_variants(
-      base: "text-muted-foreground px-2 py-1.5 text-xs",
+      **(
+        ShadcnPhlexcomponents.configuration.select&.dig(:label) ||
+        {
+          base: "text-muted-foreground px-2 py-1.5 text-xs",
+        }
+      ),
     )
 
-    def initialize(**attributes)
-      super(**attributes)
-    end
-
     def view_template(&)
       div(**@attributes, &)
     end
@@ -313,13 +320,18 @@ module ShadcnPhlexcomponents
 
   class SelectItem < Base
     class_variants(
-      base: <<~HEREDOC,
-        focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground
-        relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm
-        outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50
-        [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
-        *:[span]:last:items-center *:[span]:last:gap-2 group/item
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.select&.dig(:item) ||
+        {
+          base: <<~HEREDOC,
+            focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground
+            relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm
+            outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50
+            [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
+            *:[span]:last:items-center *:[span]:last:gap-2 group/item
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(value: nil, disabled: false, aria_id: nil, **attributes)
@@ -333,11 +345,7 @@ module ShadcnPhlexcomponents
     def view_template(&)
       div(**@attributes) do
         span(id: @aria_labelledby, &)
-
-        span(class: "absolute right-2 h-3.5 w-3.5 items-center hidden justify-center
-                    group-aria-[selected=true]/item:flex group-data-[value='']/item:hidden") do
-          icon("check", class: "size-4")
-        end
+        SelectItemIndicator()
       end
     end
 
@@ -393,7 +401,14 @@ module ShadcnPhlexcomponents
   end
 
   class SelectSeparator < Base
-    class_variants(base: "bg-border pointer-events-none -mx-1 my-1 h-px")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.select&.dig(:separator) ||
+        {
+          base: "bg-border pointer-events-none -mx-1 my-1 h-px",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -403,4 +418,46 @@ module ShadcnPhlexcomponents
       { aria: { hidden: "true" } }
     end
   end
+
+  class SelectContentContainer < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.select&.dig(:content_container) ||
+        {
+          base: "fixed top-0 left-0 w-max z-50",
+        }
+      ),
+    )
+
+    def default_attributes
+      {
+        style: { display: "none" },
+        data: { select_target: "contentContainer" },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class SelectItemIndicator < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.select&.dig(:item_indicator) ||
+        {
+          base: <<~HEREDOC,
+            absolute right-2 h-3.5 w-3.5 items-center hidden justify-center#{" "}
+            group-aria-[selected=true]/item:flex group-data-[value='']/item:hidden#{" "}
+          HEREDOC
+        }
+      ),
+    )
+
+    def view_template
+      span(**@attributes) do
+        icon("check", class: "size-4")
+      end
+    end
+  end
 end

data/lib/shadcn_phlexcomponents/components/separator.rb

@@ -3,10 +3,15 @@
 module ShadcnPhlexcomponents
   class Separator < Base
     class_variants(
-      base: <<~HEREDOC,
-        bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full
-        data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.separator ||
+        {
+          base: <<~HEREDOC,
+            bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full
+            data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(orientation: :horizontal, **attributes)

data/lib/shadcn_phlexcomponents/components/sheet.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class Sheet < Base
-    class_variants(base: "inline-flex max-w-fit")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.sheet&.dig(:root) ||
+        {
+          base: "inline-flex max-w-fit",
+        }
+      ),
+    )
 
     def initialize(open: false, **attributes)
       @open = open
@@ -97,22 +104,27 @@ module ShadcnPhlexcomponents
 
   class SheetContent < Base
     class_variants(
-      base: <<~HEREDOC,
-        bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4
-        shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500
-        pointer-events-auto outline-none
-      HEREDOC
-      variants: {
-        side: {
-          top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-          left: "h-screen data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 w-3/4 border-r sm:max-w-sm",
-          right: "h-screen data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 w-3/4 border-l sm:max-w-sm",
-          bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-        },
-      },
-      defaults: {
-        side: :right,
-      },
+      **(
+        ShadcnPhlexcomponents.configuration.sheet&.dig(:content) ||
+        {
+          base: <<~HEREDOC,
+            bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4
+            shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500
+            pointer-events-auto outline-none
+          HEREDOC
+          variants: {
+            side: {
+              top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+              left: "h-screen data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 w-3/4 border-r sm:max-w-sm",
+              right: "h-screen data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 w-3/4 border-l sm:max-w-sm",
+              bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+            },
+          },
+          defaults: {
+            side: :right,
+          },
+        }
+      ),
     )
 
     def initialize(side: :right, aria_id: nil, **attributes)
@@ -157,7 +169,14 @@ module ShadcnPhlexcomponents
   end
 
   class SheetHeader < Base
-    class_variants(base: "flex flex-col gap-1.5 p-4")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.sheet&.dig(:header) ||
+        {
+          base: "flex flex-col gap-1.5 p-4",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -165,7 +184,14 @@ module ShadcnPhlexcomponents
   end
 
   class SheetTitle < Base
-    class_variants(base: "text-foreground font-semibold")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.sheet&.dig(:title) ||
+        {
+          base: "text-foreground font-semibold",
+        }
+      ),
+    )
 
     def initialize(aria_id: nil, **attributes)
       @aria_id = aria_id
@@ -184,7 +210,14 @@ module ShadcnPhlexcomponents
   end
 
   class SheetDescription < Base
-    class_variants(base: "text-muted-foreground text-sm")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.sheet&.dig(:description) ||
+        {
+          base: "text-muted-foreground text-sm",
+        }
+      ),
+    )
 
     def initialize(aria_id: nil, **attributes)
       @aria_id = aria_id
@@ -203,7 +236,14 @@ module ShadcnPhlexcomponents
   end
 
   class SheetFooter < Base
-    class_variants(base: "mt-auto flex flex-col gap-2 p-4")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.sheet&.dig(:footer) ||
+        {
+          base: "mt-auto flex flex-col gap-2 p-4",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -240,4 +280,30 @@ module ShadcnPhlexcomponents
       }
     end
   end
+
+  class SheetCloseIcon < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.sheet&.dig(:close_icon) ||
+        {
+          base: <<~HEREDOC,
+            ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs
+            opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden
+            disabled:pointer-events-none
+          HEREDOC
+        }
+      ),
+    )
+
+    def default_attributes
+      { data: { action: "click->dialog#close" } }
+    end
+
+    def view_template
+      button(**@attributes) do
+        icon("x", class: "size-4")
+        span(class: "sr-only") { "close" }
+      end
+    end
+  end
 end

data/lib/shadcn_phlexcomponents/components/skeleton.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class Skeleton < Base
-    class_variants(base: "bg-accent animate-pulse rounded-md")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.skeleton ||
+        {
+          base: "bg-accent animate-pulse rounded-md",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)

data/lib/shadcn_phlexcomponents/components/switch.rb

@@ -3,12 +3,17 @@
 module ShadcnPhlexcomponents
   class Switch < Base
     class_variants(
-      base: <<~HEREDOC,
-        peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring
-        focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem]
-        w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all
-        outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 relative
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.switch&.dig(:root) ||
+        {
+          base: <<~HEREDOC,
+            peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring
+            focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem]
+            w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all
+            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, disabled: false, **attributes)
@@ -23,17 +28,7 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       button(**@attributes) do
-        span(
-          class: <<~HEREDOC,
-            bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground
-            pointer-events-none block size-4 rounded-full ring-0 transition-transform
-            data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0
-          HEREDOC
-          data: {
-            switch_target: "thumb",
-            state: @checked ? "checked" : "unchecked",
-          },
-        )
+        SwitchThumb(checked: @checked)
 
         if @include_hidden
           input(name: @name, type: "hidden", value: @unchecked_value, autocomplete: "off")
@@ -72,4 +67,37 @@ module ShadcnPhlexcomponents
       }
     end
   end
+
+  class SwitchThumb < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.switch&.dig(:thumb) ||
+        {
+          base: <<~HEREDOC,
+            bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground
+            pointer-events-none block size-4 rounded-full ring-0 transition-transform
+            data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0
+          HEREDOC
+        }
+      ),
+    )
+
+    def initialize(checked: false, **attributes)
+      @checked = checked
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          switch_target: "thumb",
+          state: @checked ? "checked" : "unchecked",
+        },
+      }
+    end
+
+    def view_template
+      span(**@attributes)
+    end
+  end
 end