shadcn_phlexcomponents 0.1.17 → 0.1.19

data/lib/shadcn_phlexcomponents/components/tabs.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class Tabs < Base
-    class_variants(base: "flex flex-col gap-2")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.tabs&.dig(:root) ||
+        {
+          base: "flex flex-col gap-2",
+        }
+      ),
+    )
 
     def initialize(value: nil, dir: "ltr", **attributes)
       @dir = dir
@@ -40,7 +47,12 @@ module ShadcnPhlexcomponents
 
   class TabsList < Base
     class_variants(
-      base: "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+      **(
+        ShadcnPhlexcomponents.configuration.tabs&.dig(:list) ||
+        {
+          base: "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        }
+      ),
     )
 
     def view_template(&)
@@ -60,15 +72,20 @@ module ShadcnPhlexcomponents
 
   class TabsTrigger < Base
     class_variants(
-      base: <<~HEREDOC,
-        data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring
-        focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input
-        dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)]
-        flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm
-        font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1
-        disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none
-        [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.tabs&.dig(:trigger) ||
+        {
+          base: <<~HEREDOC,
+            data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring
+            focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input
+            dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)]
+            flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm
+            font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1
+            disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none
+            [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(value: nil, aria_id: nil, **attributes)
@@ -105,7 +122,14 @@ module ShadcnPhlexcomponents
   end
 
   class TabsContent < Base
-    class_variants(base: "flex-1 outline-none")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.tabs&.dig(:content) ||
+        {
+          base: "flex-1 outline-none",
+        }
+      ),
+    )
 
     def initialize(value: nil, aria_id: nil, **attributes)
       @value = value

data/lib/shadcn_phlexcomponents/components/textarea.rb

@@ -3,13 +3,18 @@
 module ShadcnPhlexcomponents
   class Textarea < Base
     class_variants(
-      base: <<~HEREDOC,
-        border-input placeholder: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 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2
-        text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
-        disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.textarea ||
+        {
+          base: <<~HEREDOC,
+            border-input placeholder: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 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2
+            text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
+            disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(value: nil, **attributes)

data/lib/shadcn_phlexcomponents/components/toast.rb

@@ -3,23 +3,28 @@
 module ShadcnPhlexcomponents
   class Toast < Base
     class_variants(
-      base: <<~HEREDOC,
-        p-4 border shadow-lg text-[0.8rem] flex gap-1.5 items-center w-full sm:w-90 rounded-lg duration-200
-        data-[state=open]:animate-in data-[state=closed]:animate-out [&_svg]:size-4 [&_svg]:mr-1 [&_svg]:self-start [&_svg]:translate-y-0.5
-      HEREDOC
-      variants: {
-        variant: {
-          default: "bg-popover text-popover-foreground",
-          destructive: "bg-card text-destructive [&>svg]:text-current *:data-[shadcn-phlexcomponents=toast-description]:text-destructive/90",
-        },
-        side: {
-          top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-          bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        },
-      },
-      defaults: {
-        variant: :default,
-      },
+      **(
+        ShadcnPhlexcomponents.configuration.toast&.dig(:root) ||
+        {
+          base: <<~HEREDOC,
+            p-4 border shadow-lg text-[0.8rem] flex gap-1.5 items-center w-full sm:w-90 rounded-lg duration-200
+            data-[state=open]:animate-in data-[state=closed]:animate-out [&_svg]:size-4 [&_svg]:mr-1 [&_svg]:self-start [&_svg]:translate-y-0.5
+          HEREDOC
+          variants: {
+            variant: {
+              default: "bg-popover text-popover-foreground",
+              destructive: "bg-card text-destructive [&>svg]:text-current *:data-[shadcn-phlexcomponents=toast-description]:text-destructive/90",
+            },
+            side: {
+              top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+              bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+            },
+          },
+          defaults: {
+            variant: :default,
+          },
+        }
+      ),
     )
 
     def initialize(variant: :default, side: :top, duration: 5000, **attributes)
@@ -76,7 +81,14 @@ module ShadcnPhlexcomponents
   end
 
   class ToastContent < Base
-    class_variants(base: "flex flex-col gap-0.5")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.toast&.dig(:content) ||
+        {
+          base: "flex flex-col gap-0.5",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -84,7 +96,14 @@ module ShadcnPhlexcomponents
   end
 
   class ToastTitle < Base
-    class_variants(base: "font-medium leading-[1.5]")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.toast&.dig(:title) ||
+        {
+          base: "font-medium leading-[1.5]",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)
@@ -92,7 +111,14 @@ module ShadcnPhlexcomponents
   end
 
   class ToastDescription < Base
-    class_variants(base: "leading-[1.4] opacity-90")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.toast&.dig(:description) ||
+        {
+          base: "leading-[1.4] opacity-90",
+        }
+      ),
+    )
 
     def view_template(&)
       div(**@attributes, &)

data/lib/shadcn_phlexcomponents/components/toast_container.rb

@@ -3,20 +3,25 @@
 module ShadcnPhlexcomponents
   class ToastContainer < Base
     class_variants(
-      base: "fixed z-50 hidden has-[li]:flex flex-col gap-2",
-      variants: {
-        side: {
-          top_center: "top-6 left-1/2 -translate-x-1/2",
-          top_left: "top-6 left-6",
-          top_right: "top-6 right-6",
-          bottom_center: "bottom-6 left-1/2 -translate-x-1/2",
-          bottom_left: "bottom-6 left-6",
-          bottom_right: "right-6 bottom-6",
-        },
-      },
-      defaults: {
-        side: :top_center,
-      },
+      **(
+        ShadcnPhlexcomponents.configuration.toast_container ||
+        {
+          base: "fixed z-50 hidden has-[li]:flex flex-col gap-2",
+          variants: {
+            side: {
+              top_center: "top-6 left-1/2 -translate-x-1/2",
+              top_left: "top-6 left-6",
+              top_right: "top-6 right-6",
+              bottom_center: "bottom-6 left-1/2 -translate-x-1/2",
+              bottom_left: "bottom-6 left-6",
+              bottom_right: "right-6 bottom-6",
+            },
+          },
+          defaults: {
+            side: :top_center,
+          },
+        }
+      ),
     )
 
     def initialize(side: :top_center, **attributes)

data/lib/shadcn_phlexcomponents/components/toggle.rb

@@ -3,29 +3,34 @@
 module ShadcnPhlexcomponents
   class Toggle < Base
     class_variants(
-      base: <<~HEREDOC,
-        inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted
-        hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent
-        data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4
-        [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none
-        transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
-        aria-invalid:border-destructive whitespace-nowrap
-      HEREDOC
-      variants: {
-        variant: {
-          default: "bg-transparent",
-          outline: "border border-input bg-transparent shadow-xs hover:bg-muted hover:text-muted-foreground",
-        },
-        size: {
-          default: "h-9 px-2 min-w-9",
-          sm: "h-8 px-1.5 min-w-8",
-          lg: "h-10 px-2.5 min-w-10",
-        },
-      },
-      defaults: {
-        variant: :default,
-        size: :default,
-      },
+      **(
+        ShadcnPhlexcomponents.configuration.toggle ||
+        {
+          base: <<~HEREDOC,
+            inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted
+            hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent
+            data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4
+            [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none
+            transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40
+            aria-invalid:border-destructive whitespace-nowrap
+          HEREDOC
+          variants: {
+            variant: {
+              default: "bg-transparent",
+              outline: "border border-input bg-transparent shadow-xs hover:bg-muted hover:text-muted-foreground",
+            },
+            size: {
+              default: "h-9 px-2 min-w-9",
+              sm: "h-8 px-1.5 min-w-8",
+              lg: "h-10 px-2.5 min-w-10",
+            },
+          },
+          defaults: {
+            variant: :default,
+            size: :default,
+          },
+        }
+      ),
     )
 
     def initialize(variant: :default, size: :default, on: false, **attributes)
@@ -42,7 +47,7 @@ module ShadcnPhlexcomponents
         data: {
           controller: "toggle",
           toggle_is_on_value: @on.to_s,
-          action: "click->toggle#toggle"
+          action: "click->toggle#toggle",
         },
       }
     end

data/lib/shadcn_phlexcomponents/components/tooltip.rb

@@ -2,7 +2,14 @@
 
 module ShadcnPhlexcomponents
   class Tooltip < Base
-    class_variants(base: "inline-flex max-w-fit")
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.tooltip&.dig(:root) ||
+        {
+          base: "inline-flex max-w-fit",
+        }
+      ),
+    )
 
     def initialize(open: false, **attributes)
       @open = open
@@ -76,12 +83,17 @@ module ShadcnPhlexcomponents
 
   class TooltipContent < Base
     class_variants(
-      base: <<~HEREDOC,
-        bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out
-        data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance
-      HEREDOC
+      **(
+        ShadcnPhlexcomponents.configuration.tooltip&.dig(:content) ||
+        {
+          base: <<~HEREDOC,
+            bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out
+            data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance
+          HEREDOC
+        }
+      ),
     )
 
     def initialize(side: :top, align: :center, aria_id: nil, **attributes)
@@ -100,13 +112,7 @@ module ShadcnPhlexcomponents
         div(**@attributes) do
           yield
 
-          span(data: { tooltip_target: "arrow" }) do
-            raw(safe(
-              '<svg class="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" width="10" height="5" viewBox="0 0 30 10" preserveAspectRatio="none">
-                <polygon points="0,0 30,0 15,10"></polygon>
-              </svg>',
-            ))
-          end
+          TooltipArrow()
 
           span(
             id: "#{@aria_id}-content",
@@ -129,4 +135,33 @@ module ShadcnPhlexcomponents
       }
     end
   end
+
+  class TooltipArrow < Base
+    class_variants(
+      **(
+        ShadcnPhlexcomponents.configuration.tooltip&.dig(:arrow) ||
+        {
+          base: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",
+        }
+      ),
+    )
+
+    def default_attributes
+      {
+        width: 10,
+        height: 5,
+        viewBox: "0 0 30 10",
+        preserveAspectRatio: "none",
+      }
+    end
+
+    def view_template
+      span(data: { tooltip_target: "arrow" }) do
+        svg(**@attributes) do
+          # Weird bug with phlex where it's throwing a undefined method "polygon"
+          raw(safe('<polygon points="0,0 30,0 15,10"></polygon>'))
+        end
+      end
+    end
+  end
 end

data/lib/shadcn_phlexcomponents/configuration.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Configuration
+    attr_accessor :accordion,
+      :alert_dialog,
+      :alert,
+      :aspect_ratio,
+      :avatar,
+      :badge,
+      :breadcrumb,
+      :button,
+      :card,
+      :checkbox_group,
+      :checkbox,
+      :combobox,
+      :command,
+      :date_picker,
+      :date_range_picker,
+      :dialog,
+      :dropdown_menu_sub,
+      :dropdown_menu,
+      :form,
+      :hover_card,
+      :input,
+      :label,
+      :link,
+      :pagination,
+      :popover,
+      :progress,
+      :radio_group,
+      :select,
+      :separator,
+      :sheet,
+      :skeleton,
+      :switch,
+      :table,
+      :tabs,
+      :textarea,
+      :theme_switcher,
+      :toast_container,
+      :toast,
+      :toggle,
+      :tooltip
+  end
+end

data/lib/shadcn_phlexcomponents/initializers/shadcn_phlexcomponents.rb

@@ -4,6 +4,34 @@ module ShadcnPhlexcomponents
   extend Phlex::Kit
 end
 
+# Configure your components here.
+# ShadcnPhlexcomponents.configure do |config|
+#   config.alert = {
+#     root: {
+#       base: <<~HEREDOC,
+#         relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]
+#         grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5
+#         [&>svg]:text-current
+#       HEREDOC
+#       variants: {
+#         variant: {
+#           default: "bg-card text-card-foreground",
+#           destructive: "text-destructive bg-card [&>svg]:text-current *:data-[shadcn-phlexcomponents=alert-description]:text-destructive/90",
+#         },
+#       },
+#       defaults: {
+#         variant: :default,
+#       },
+#     },
+#     title: {
+#       base: "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+#     },
+#     description: {
+#       base: "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+#     },
+#   }
+# end
+
 # Require base.rb first
 require Rails.root.join("vendor/shadcn_phlexcomponents/components/base.rb")
 

data/lib/shadcn_phlexcomponents/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ShadcnPhlexcomponents
-  VERSION = "0.1.17"
+  VERSION = "0.1.19"
 end

data/lib/shadcn_phlexcomponents.rb

@@ -2,8 +2,19 @@
 
 require_relative "shadcn_phlexcomponents/version"
 require_relative "shadcn_phlexcomponents/engine"
+require_relative "shadcn_phlexcomponents/configuration"
 
 module ShadcnPhlexcomponents
   class Error < StandardError; end
-  # Your code goes here...
+
+  class << self
+    def configure
+      self.configuration ||= Configuration.new
+      yield(configuration)
+    end
+
+    def configuration
+      @configuration ||= Configuration.new
+    end
+  end
 end

data/lib/tasks/upgrade.rake

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+namespace :shadcn_phlexcomponents do
+  desc "Upgrade shadcn_phlexcomponents"
+  task :upgrade do
+    system "ENVIRONMENT=#{ENV["ENVIRONMENT"]} #{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path(
+      "../install/upgrade_shadcn_phlexcomponents.rb", __dir__
+    )}"
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: shadcn_phlexcomponents
 version: !ruby/object:Gem::Version
-  version: 0.1.17
+  version: 0.1.19
 platform: ruby
 authors:
 - Sean Yeoh
@@ -10,47 +10,47 @@ cert_chain: []
 date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: lucide-rails
+  name: class_variants
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.5.1
+        version: '1.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.5.1
+        version: '1.1'
 - !ruby/object:Gem::Dependency
-  name: phlex-rails
+  name: lucide-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.1'
+        version: 0.5.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.1'
+        version: 0.5.1
 - !ruby/object:Gem::Dependency
-  name: railties
+  name: phlex-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '8.0'
+        version: '2.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '8.0'
+        version: '2.1'
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
   requirement: !ruby/object:Gem::Requirement
@@ -109,6 +109,7 @@ files:
 - app/javascript/utils/index.js
 - app/stylesheets/date_picker.css
 - app/stylesheets/nouislider.css
+- app/stylesheets/shadcn_phlexcomponents.css
 - app/stylesheets/tw-animate.css
 - app/typescript/controllers/accordion_controller.ts
 - app/typescript/controllers/alert_dialog_controller.ts
@@ -129,8 +130,6 @@ files:
 - app/typescript/controllers/progress_controller.ts
 - app/typescript/controllers/radio_group_controller.ts
 - app/typescript/controllers/select_controller.ts
-- app/typescript/controllers/sidebar_controller.ts
-- app/typescript/controllers/sidebar_trigger_controller.ts
 - app/typescript/controllers/slider_controller.ts
 - app/typescript/controllers/switch_controller.ts
 - app/typescript/controllers/tabs_controller.ts
@@ -145,6 +144,7 @@ files:
 - app/typescript/utils/floating_ui.ts
 - app/typescript/utils/index.ts
 - lib/install/install_shadcn_phlexcomponents.rb
+- lib/install/upgrade_shadcn_phlexcomponents.rb
 - lib/shadcn_phlexcomponents.rb
 - lib/shadcn_phlexcomponents/alias.rb
 - lib/shadcn_phlexcomponents/components/accordion.rb
@@ -205,10 +205,12 @@ files:
 - lib/shadcn_phlexcomponents/components/toast_container.rb
 - lib/shadcn_phlexcomponents/components/toggle.rb
 - lib/shadcn_phlexcomponents/components/tooltip.rb
+- lib/shadcn_phlexcomponents/configuration.rb
 - lib/shadcn_phlexcomponents/engine.rb
 - lib/shadcn_phlexcomponents/initializers/shadcn_phlexcomponents.rb
 - lib/shadcn_phlexcomponents/version.rb
 - lib/tasks/install.rake
+- lib/tasks/upgrade.rake
 homepage: https://github.com/sean-yeoh/shadcn_phlexcomponents
 licenses:
 - MIT
@@ -223,14 +225,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 3.3.0
+      version: 3.4.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.7
+rubygems_version: 3.6.9
 specification_version: 4
 summary: Shadcn Phlexcomponents is a UI Component library built for Ruby on Rails.
 test_files: []