shadcn_phlexcomponents 0.1.5 → 0.1.9

data/app/stylesheets/date_picker.css

@@ -0,0 +1,212 @@
+[data-vc='calendar'] {
+  @apply relative flex flex-col outline-none p-3;
+}
+
+[data-vc='controls'] {
+  @apply absolute z-20 -left-1 -right-1 -top-1.5 flex justify-between items-center pt-5 px-4 pointer-events-none box-content;
+}
+
+[data-vc='grid'] {
+  @apply grid grid-cols-1 md:grid-cols-2 gap-6;
+}
+
+[data-vc='column'] {
+  @apply flex flex-col;
+}
+
+[data-vc='header'] {
+  @apply relative flex items-center mb-3;
+}
+
+[data-vc-header='content'] {
+  @apply grid grid-flow-col auto-cols-max items-center justify-center px-4 whitespace-pre-wrap grow;
+}
+
+[data-vc='month'],
+[data-vc='year'],
+[data-vc-months-month],
+[data-vc-years-year] {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base;
+  @apply font-medium transition-colors focus-visible:outline-none focus-visible:ring-1;
+  @apply focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
+  @apply [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer;
+  @apply hover:bg-accent hover:text-accent-foreground px-2 h-10 md:h-8 md:px-3 pointer-events-auto;
+}
+
+[data-vc-months-month],
+[data-vc-years-year] {
+  @apply md:text-sm;
+}
+
+[data-vc='wrapper'] {
+  @apply flex grow;
+}
+
+[data-vc='content'] {
+  @apply flex flex-col grow;
+}
+
+[data-vc='months'] {
+  @apply grid gap-y-4 gap-x-2 grid-cols-3 md:grid-cols-4 items-center grow;
+}
+
+[data-vc='years'] {
+  @apply grid gap-y-4 gap-x-2 grid-cols-3 md:grid-cols-5 items-center grow;
+}
+
+[data-vc='week'] {
+  @apply grid grid-cols-[repeat(7,_1fr)] justify-items-center mb-2;
+}
+
+[data-vc-week-day] {
+  @apply text-muted-foreground font-normal text-xs flex items-center justify-center;
+}
+
+[data-vc='dates'] {
+  @apply grid gap-y-1 grid-cols-[repeat(7,_1fr)] justify-items-center items-center grow pointer-events-none;
+}
+
+[data-vc-date-btn] {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base md:text-sm;
+  @apply font-medium transition-colors focus-visible:outline-none focus-visible:ring-1;
+  @apply focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
+  @apply [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer;
+  @apply hover:bg-accent hover:text-accent-foreground md:h-9 md:w-9 h-10 w-10 pointer-events-auto;
+}
+
+[data-vc-years-year-selected],
+[data-vc-months-month-selected] {
+  @apply bg-primary text-primary-foreground;
+}
+
+[data-vc-date-today] [data-vc-date-btn] {
+  @apply bg-accent text-accent-foreground font-bold;
+}
+
+[data-vc-date-btn][aria-selected='true'] {
+  @apply bg-primary text-primary-foreground hover:bg-primary/90;
+}
+
+[data-vc-arrow] {
+  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm;
+  @apply font-medium transition-colors focus-visible:outline-none focus-visible:ring-1;
+  @apply focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50;
+  @apply [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer;
+  @apply border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground;
+  @apply pointer-events-auto w-7 h-7;
+}
+
+[data-vc-arrow='next']:before {
+  @apply bg-accent-foreground h-7 w-7;
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>');
+  mask-repeat: no-repeat;
+  position: absolute;
+  content: '';
+  mask-size: auto 16px;
+  mask-position: center;
+}
+
+[data-vc-arrow='prev']:before {
+  @apply bg-accent-foreground h-7 w-7;
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>');
+  mask-repeat: no-repeat;
+  position: absolute;
+  content: '';
+  mask-size: auto 16px;
+  mask-position: center;
+}
+
+[data-vc-date-month='prev'] [data-vc-date-btn],
+[data-vc-date-month='next'] [data-vc-date-btn] {
+  @apply text-muted-foreground;
+}
+
+[data-vc-date-disabled] [data-vc-date-btn] {
+  @apply pointer-events-none opacity-50 text-muted-foreground;
+}
+
+[data-vc='grid'][data-vc-grid='hidden'] [data-vc='column'] {
+  @apply opacity-30 pointer-events-none;
+}
+
+[data-vc='grid'][data-vc-grid='hidden']
+  [data-vc='column'][data-vc-column='month'],
+[data-vc='grid'][data-vc-grid='hidden']
+  [data-vc='column'][data-vc-column='year'] {
+  @apply opacity-100 pointer-events-auto;
+}
+
+[data-vc-date][data-vc-date-hover] [data-vc-date-btn] {
+  @apply rounded-none;
+}
+
+[data-vc-date][data-vc-date-hover='first'] [data-vc-date-btn] {
+  @apply rounded-r-none rounded-l-md;
+}
+
+[data-vc-date][data-vc-date-hover='last'] [data-vc-date-btn] {
+  @apply rounded-l-none rounded-r-md;
+}
+
+[data-vc-date][data-vc-date-hover='first-and-last'] [data-vc-date-btn] {
+  @apply rounded-md;
+}
+
+[data-vc-date][data-vc-date-hover='first'][data-vc-date-selected]
+  [data-vc-date-btn] {
+  @apply rounded-l-md;
+}
+
+[data-vc-date][data-vc-date-hover='last'][data-vc-date-selected]
+  [data-vc-date-btn] {
+  @apply rounded-r-md;
+}
+
+[data-vc-date][data-vc-date-selected='first'] [data-vc-date-btn] {
+  @apply rounded-r-none rounded-l-md;
+}
+
+[data-vc-date][data-vc-date-selected='last'] [data-vc-date-btn] {
+  @apply rounded-l-none rounded-r-md;
+}
+
+[data-vc-date][data-vc-date-selected='first-and-last'] [data-vc-date-btn] {
+  @apply rounded-l-md rounded-r-md;
+}
+
+[data-vc-date][data-vc-date-selected='middle'] [data-vc-date-btn] {
+  @apply rounded-none;
+}
+
+/* [data-vc-date][data-vc-date-disabled]
+  + [data-vc-date-selected]
+  [data-vc-date-btn],
+[data-vc-date][data-vc-date-disabled]
+  + [data-vc-date-hover]
+  [data-vc-date-btn] {
+  @apply rounded-l-md;
+} */
+
+/* [data-vc-date][data-vc-date-hover]:has(+ [data-vc-date-disabled])
+  [data-vc-date-btn],
+[data-vc-date][data-vc-date-selected]:has(+ [data-vc-date-disabled])
+  [data-vc-date-btn] {
+  @apply rounded-r-md;
+} */
+
+[data-vc-date-hover] [data-vc-date-btn] {
+  @apply bg-accent text-accent-foreground;
+}
+
+[data-vc-date-selected] [data-vc-date-btn] {
+  @apply bg-primary text-primary-foreground;
+}
+
+[data-vc-date-selected='middle'][data-vc-date-selected] [data-vc-date-btn] {
+  @apply bg-primary/20 hover:bg-primary/20 text-accent-foreground;
+}
+
+[data-vc-date-hover='last'] [data-vc-date-btn],
+[data-vc-date-hover='first'] [data-vc-date-btn] {
+  @apply bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground;
+}

data/lib/install/install_shadcn_phlexcomponents.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
-components_path = File.expand_path("../components", __dir__)
-components_install_path = Rails.root.join("vendor/shadcn_phlexcomponents")
-stimulus_controllers_path = File.expand_path("../../app/javascript/controllers", __dir__)
-stimulus_controllers_install_path = Rails.root.join("app/javascript/controllers/shadcn_phlexcomponents")
-tailwindcss_animate_path = File.expand_path("../../app/assets/tailwind/tailwindcss-animate.css", __dir__)
-tailwindcss_animate_install_path = Rails.root.join("app/assets/tailwind/shadcn_phlexcomponents/tailwindcss-animate.css")
+components_path = File.expand_path("../shadcn_phlexcomponents/components", __dir__)
+components_install_path = Rails.root.join("vendor/shadcn_phlexcomponents/components")
+stimulus_controllers_path = File.expand_path("../../app/javascript", __dir__)
+stimulus_controllers_install_path = Rails.root.join("vendor/shadcn_phlexcomponents/javascript")
+css_path = File.expand_path("../../app/stylesheets", __dir__)
+css_install_path = Rails.root.join("vendor/shadcn_phlexcomponents/stylesheets")
 
 directory(components_path, components_install_path)
 directory(stimulus_controllers_path, stimulus_controllers_install_path)
-copy_file(tailwindcss_animate_path, tailwindcss_animate_install_path)
+directory(css_path, css_install_path)

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

@@ -26,7 +26,7 @@ module ShadcnPhlexcomponents
         data: {
           value: (@value || []).to_json,
           multiple: @multiple.to_s,
-          controller: "shadcn-phlexcomponents--accordion",
+          controller: "accordion",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/accordion}/accordion_content.rb

@@ -20,7 +20,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          "shadcn-phlexcomponents--accordion-target": "content",
+          "accordion-target": "content",
         },
       ) do
         div(**@attributes, &)

data/lib/{components → shadcn_phlexcomponents/components/accordion}/accordion_item.rb

@@ -14,7 +14,7 @@ module ShadcnPhlexcomponents
         data: {
           state: "closed",
           value: @value,
-          "shadcn-phlexcomponents--accordion-target": "item",
+          "accordion-target": "item",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/accordion}/accordion_trigger.rb

@@ -5,6 +5,7 @@ module ShadcnPhlexcomponents
     STYLES = <<~HEREDOC
       flex flex-1 items-center justify-between py-4 text-sm font-medium cursor-pointer
       transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180
+      disabled:opacity-50 disabled:hover:no-underline
     HEREDOC
 
     def initialize(aria_id: nil, **attributes)
@@ -22,11 +23,11 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          "shadcn-phlexcomponents--accordion-target": "trigger",
+          "accordion-target": "trigger",
           action: <<~HEREDOC,
-            click->shadcn-phlexcomponents--accordion#toggleItem
-            keydown.up->shadcn-phlexcomponents--accordion#focusPrev:prevent
-            keydown.down->shadcn-phlexcomponents--accordion#focusNext:prevent
+            click->accordion#toggleItem
+            keydown.up->accordion#focusPrev:prevent
+            keydown.down->accordion#focusNext:prevent
           HEREDOC
         },
       }

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

@@ -48,7 +48,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          controller: "shadcn-phlexcomponents--alert-dialog",
+          controller: "alert-dialog",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/alert_dialog}/alert_dialog_action.rb

@@ -10,7 +10,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          action: "click->shadcn-phlexcomponents--alert-dialog#close",
+          action: "click->alert-dialog#close",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/alert_dialog}/alert_dialog_action_to.rb

@@ -11,7 +11,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          action: "click->shadcn-phlexcomponents--alert-dialog#close",
+          action: "click->alert-dialog#close",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/alert_dialog}/alert_dialog_cancel.rb

@@ -10,7 +10,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          action: "click->shadcn-phlexcomponents--alert-dialog#close",
+          action: "click->alert-dialog#close",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/alert_dialog}/alert_dialog_content.rb

@@ -3,7 +3,7 @@
 module ShadcnPhlexcomponents
   class AlertDialogContent < Base
     STYLES = <<~HEREDOC
-      fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%]
+      fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] pointer-events-auto
       translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200
       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
@@ -27,7 +27,7 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: "closed",
-          "shadcn-phlexcomponents--alert-dialog-target": "content",
+          "alert-dialog-target": "content",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/alert_dialog}/alert_dialog_trigger.rb

@@ -17,8 +17,8 @@ module ShadcnPhlexcomponents
           controls: "#{@aria_id}-content",
         },
         data: {
-          action: "click->shadcn-phlexcomponents--alert-dialog#open",
-          "shadcn-phlexcomponents--alert-dialog-target": "trigger",
+          action: "click->alert-dialog#open",
+          "alert-dialog-target": "trigger",
           as_child: @as_child.to_s,
         },
       }

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

@@ -19,7 +19,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          controller: "shadcn-phlexcomponents--avatar",
+          controller: "avatar",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/avatar}/avatar_fallback.rb

@@ -7,7 +7,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          "shadcn-phlexcomponents--avatar-target": "fallback",
+          "avatar-target": "fallback",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/avatar}/avatar_image.rb

@@ -7,7 +7,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          "shadcn-phlexcomponents--avatar-target": "image",
+          "avatar-target": "image",
         },
       }
     end

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

@@ -24,7 +24,7 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(**@attributes, &)
+      span(**@attributes, &)
     end
   end
 end

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

@@ -104,5 +104,15 @@ module ShadcnPhlexcomponents
         struct
       end
     end
+
+    def item_disabled?(disabled, value)
+      if disabled.is_a?(String)
+        value == disabled
+      elsif disabled.is_a?(Array)
+        disabled.include?(value)
+      else
+        disabled
+      end
+    end
   end
 end

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

@@ -40,6 +40,8 @@ module ShadcnPhlexcomponents
           separator
         end
       end
+
+      nil
     end
 
     def view_template(&)

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

@@ -3,8 +3,8 @@
 module ShadcnPhlexcomponents
   class Button < Base
     STYLES = <<~HEREDOC
-      inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md
-      text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1
+      inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm
+      font-medium transition-colors focus-visible:outline-none focus-visible:ring-1
       focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50
       [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer
     HEREDOC
@@ -13,15 +13,15 @@ module ShadcnPhlexcomponents
       primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
       secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
       destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-      outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+      outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
       ghost: "hover:bg-accent hover:text-accent-foreground",
       link: "text-primary underline-offset-4 hover:underline",
     }.freeze
 
     SIZES = {
       default: "h-9 px-4 py-2",
-      sm: "h-8 rounded-md px-3 text-xs",
-      lg: "h-10 rounded-md px-8",
+      sm: "h-8 px-3 text-xs",
+      lg: "h-10 px-8",
       icon: "h-9 w-9",
     }
 

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

@@ -40,7 +40,7 @@ module ShadcnPhlexcomponents
           checked: @checked,
           aria: { hidden: true },
           data: {
-            "shadcn-phlexcomponents--checkbox-target": "input",
+            "checkbox-target": "input",
           },
         )
       end
@@ -56,12 +56,12 @@ module ShadcnPhlexcomponents
         },
         data: {
           checked: @checked.to_s,
-          controller: "shadcn-phlexcomponents--checkbox",
+          controller: "checkbox",
           action: <<~HEREDOC,
-            click->shadcn-phlexcomponents--checkbox#toggle
-            keydown.enter->shadcn-phlexcomponents--checkbox#preventDefault
+            click->checkbox#toggle
+            keydown.enter->checkbox#preventDefault
           HEREDOC
-          "shadcn-phlexcomponents--checkbox-checked-value": @checked,
+          "checkbox-checked-value": @checked,
         },
       }
     end

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

@@ -4,16 +4,28 @@ module ShadcnPhlexcomponents
   class CheckboxGroup < Base
     STYLES = "space-y-1.5"
 
-    def initialize(name:, value: [], include_hidden: true, disabled: false, **attributes)
+    def initialize(name:, value: [], include_hidden: true, item_id_prefix: nil, **attributes)
       @name = name
       @value = value
       @include_hidden = include_hidden
-      @disabled = disabled
+      @item_id_prefix = item_id_prefix
       super(**attributes)
     end
 
-    def items(collection, value_method:, text_method:, wrapper_class: nil)
-      wrapper_class = TAILWIND_MERGER.merge("flex items-center space-x-2 #{wrapper_class}")
+    def label(**attributes)
+      @label_attributes = attributes
+      nil
+    end
+
+    def checkbox(**attributes)
+      @checkbox_attributes = attributes
+      nil
+    end
+
+    def items(collection, value_method:, text_method:, wrapper_class: nil, disabled_items: nil, &)
+      vanish(&)
+
+      @wrapper_class = TAILWIND_MERGER.merge("flex items-center space-x-2 #{wrapper_class}")
 
       if collection.first&.is_a?(Hash)
         collection = convert_collection_hash_to_struct(collection, value_method: value_method, text_method: text_method)
@@ -22,28 +34,28 @@ module ShadcnPhlexcomponents
       collection.each do |item|
         value = item.public_send(value_method)
         text = item.public_send(text_method)
-        id = "#{@name.parameterize.underscore}_#{value}"
 
-        div(class: wrapper_class) do
-          checkbox_disabled = if @disabled.is_a?(String)
-            value == @disabled
-          elsif @disabled.is_a?(Array)
-            @disabled.include?(value)
-          else
-            @disabled
-          end
+        id = if @item_id_prefix
+          "#{@item_id_prefix.parameterize.underscore}_#{value}"
+        else
+          "#{@name.parameterize.underscore}_#{value}"
+        end
 
+        div(class: @wrapper_class) do
           Checkbox(
             name: "#{@name}[]",
             id: id,
             value: value,
             checked: @value.include?(value),
             include_hidden: false,
-            disabled: checkbox_disabled,
+            disabled: item_disabled?(disabled_items, value),
+            **@checkbox_attributes,
           )
-          Label(for: id) { text }
+          Label(for: id, **@label_attributes) { text }
         end
       end
+
+      nil
     end
 
     def default_attributes

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

@@ -19,7 +19,7 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         data: {
-          controller: "shadcn-phlexcomponents--collapsible",
+          controller: "collapsible",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/collapsible}/collapsible_content.rb

@@ -11,7 +11,7 @@ module ShadcnPhlexcomponents
       {
         id: "#{@aria_id}-content",
         data: {
-          "shadcn-phlexcomponents--collapsible-target": "content",
+          "collapsible-target": "content",
         },
       }
     end

data/lib/{components → shadcn_phlexcomponents/components/collapsible}/collapsible_trigger.rb

@@ -18,8 +18,8 @@ module ShadcnPhlexcomponents
         },
         data: {
           state: @open ? "open" : "closed",
-          action: "click->shadcn-phlexcomponents--collapsible#toggle",
-          "shadcn-phlexcomponents--collapsible-target": "trigger",
+          action: "click->collapsible#toggle",
+          "collapsible-target": "trigger",
         },
       }
     end