shadcn_phlexcomponents 0.1.11 → 0.1.14

data/lib/shadcn_phlexcomponents/components/form.rb

@@ -11,6 +11,7 @@ require_relative "form/form_checkbox_group"
 require_relative "form/form_date_picker"
 require_relative "form/form_date_range_picker"
 require_relative "form/form_select"
+require_relative "form/form_combobox"
 require_relative "form/form_radio_group"
 require_relative "form/form_slider"
 
@@ -83,6 +84,19 @@ module ShadcnPhlexcomponents
       )
     end
 
+    def combobox(method = nil, collection = [], value_method:, text_method:, **attributes, &)
+      FormCombobox(
+        method,
+        model: @model,
+        object_name: @object_name,
+        collection: collection,
+        value_method: value_method,
+        text_method: text_method,
+        **attributes,
+        &
+      )
+    end
+
     def date_picker(method = nil, **attributes, &)
       FormDatePicker(method, model: @model, object_name: @object_name, **attributes, &)
     end

data/lib/shadcn_phlexcomponents/components/hover_card.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class HoverCard < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     def initialize(open: false, **attributes)
       @open = open
@@ -88,7 +88,8 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(
-        class: "hidden fixed top-0 left-0 w-max z-50",
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
         data: { hover_card_target: "contentContainer" },
       ) do
         div(**@attributes, &)

data/lib/shadcn_phlexcomponents/components/popover.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Popover < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     def initialize(open: false, **attributes)
       @open = open
@@ -23,7 +23,6 @@ module ShadcnPhlexcomponents
         data: {
           controller: "popover",
           popover_is_open_value: @open.to_s,
-          side: @side,
         },
       }
     end
@@ -92,7 +91,8 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(
-        class: "hidden fixed top-0 left-0 w-max z-50",
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
         data: { popover_target: "contentContainer" },
       ) do
         div(**@attributes, &)

data/lib/shadcn_phlexcomponents/components/select.rb

@@ -10,7 +10,6 @@ module ShadcnPhlexcomponents
       value: nil,
       placeholder: nil,
       native: false,
-      dir: "ltr",
       include_blank: false,
       disabled: false,
       **attributes
@@ -20,7 +19,6 @@ module ShadcnPhlexcomponents
       @value = value
       @placeholder = placeholder
       @native = native
-      @dir = dir
       @include_blank = include_blank
       @disabled = disabled
       @aria_id = "select-#{SecureRandom.hex(5)}"
@@ -39,7 +37,6 @@ module ShadcnPhlexcomponents
       SelectTrigger(
         id: @id,
         aria_id: @aria_id,
-        dir: @dir,
         value: @value,
         placeholder: @placeholder,
         disabled: @disabled,
@@ -49,7 +46,7 @@ module ShadcnPhlexcomponents
 
     def content(**attributes, &)
       SelectContent(
-        aria_id: @aria_id, dir: @dir, include_blank: @include_blank, native: @native, **attributes, &
+        aria_id: @aria_id, include_blank: @include_blank, native: @native, **attributes, &
       )
     end
 
@@ -75,13 +72,12 @@ module ShadcnPhlexcomponents
       SelectTrigger(
         id: @id,
         aria_id: @aria_id,
-        dir: @dir,
         value: @value,
         placeholder: @placeholder,
         disabled: @disabled,
       )
 
-      SelectContent(aria_id: @aria_id, dir: @dir, include_blank: @include_blank, native: @native) do
+      SelectContent(aria_id: @aria_id, include_blank: @include_blank, native: @native) do
         collection.each do |item|
           value = item.public_send(value_method)
           text = item.public_send(text_method)
@@ -151,7 +147,7 @@ module ShadcnPhlexcomponents
         next if content_child.is_a?(Nokogiri::XML::Text) || content_child.is_a?(Nokogiri::XML::Comment)
 
         if content_child.attributes["data-select-target"]&.value == "group"
-          group_label = content_child.at_css('[data-select-target="label"]')&.text
+          group_label = content_child.at_css('[data-shadcn-phlexcomponents="select-label"]')&.text
 
           optgroup(label: group_label, class: NATIVE_OPTION_STYLES) do
             content_child.css('[data-select-target="item"]').each do |i|
@@ -195,11 +191,10 @@ module ShadcnPhlexcomponents
       HEREDOC
     )
 
-    def initialize(id: nil, value: nil, placeholder: nil, dir: "ltr", aria_id: nil, **attributes)
+    def initialize(id: nil, value: nil, placeholder: nil, aria_id: nil, **attributes)
       @id = id
       @value = value
       @placeholder = placeholder
-      @dir = dir
       @aria_id = aria_id
       super(**attributes)
     end
@@ -218,7 +213,6 @@ module ShadcnPhlexcomponents
       {
         type: "button",
         id: @id,
-        dir: @dir,
         role: "combobox",
         aria: {
           autocomplete: "none",
@@ -230,9 +224,9 @@ module ShadcnPhlexcomponents
           has_value: @value.present?.to_s,
           action: <<~HEREDOC,
             click->select#toggle
-            keydown.space->select#open
-            keydown.enter->select#open
             keydown.down->select#open:prevent
+            keydown.space->select#open:prevent
+            keydown.enter->select#open:prevent
           HEREDOC
           select_target: "trigger",
         },
@@ -252,10 +246,9 @@ module ShadcnPhlexcomponents
       HEREDOC
     )
 
-    def initialize(include_blank: false, native: false, dir: "ltr", side: :bottom, align: :center, aria_id: nil, **attributes)
+    def initialize(include_blank: false, native: false, side: :bottom, align: :center, aria_id: nil, **attributes)
       @include_blank = include_blank
       @native = native
-      @dir = dir
       @side = side
       @align = align
       @aria_id = aria_id
@@ -264,12 +257,13 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(
-        class: "hidden fixed top-0 left-0 w-max z-50",
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
         data: { select_target: "contentContainer" },
       ) do
         div(**@attributes) do
           if @include_blank && !@native
-            SelectItem(aria_id: @aria_id, value: "", class: "h-8", hide_icon: true) do
+            SelectItem(aria_id: @aria_id, value: "", class: "h-8") do
               @include_blank.is_a?(String) ? @include_blank : ""
             end
           end
@@ -282,7 +276,6 @@ module ShadcnPhlexcomponents
     def default_attributes
       {
         id: "#{@aria_id}-content",
-        dir: @dir,
         tabindex: -1,
         role: "listbox",
         aria: {
@@ -316,14 +309,6 @@ module ShadcnPhlexcomponents
     def view_template(&)
       div(**@attributes, &)
     end
-
-    def default_attributes
-      {
-        data: {
-          select_target: "label",
-        },
-      }
-    end
   end
 
   class SelectItem < Base

data/lib/shadcn_phlexcomponents/components/sheet.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Sheet < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     def initialize(open: false, **attributes)
       @open = open
@@ -42,12 +42,17 @@ module ShadcnPhlexcomponents
       {
         data: {
           controller: "dialog",
-        },
-      }
+          dialog_is_open_value: @open.to_s
+        }
+      }  
     end
 
     def view_template(&)
-      div(**@attributes, &)
+      div(**@attributes) do
+        overlay("dialog")
+        
+        yield
+      end
     end
   end
 
@@ -66,10 +71,10 @@ module ShadcnPhlexcomponents
           expanded: false,
           controls: "#{@aria_id}-content",
         },
-        data: {
+        data: { 
           as_child: @as_child.to_s,
-          action: "click->dialog#open",
           dialog_target: "trigger",
+          action: "click->dialog#open"
         },
       }
     end
@@ -95,7 +100,7 @@ module ShadcnPhlexcomponents
       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
+        pointer-events-auto outline-none
       HEREDOC
       variants: {
         side: {
@@ -117,8 +122,7 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      @class = @attributes.delete(:class)
-      div(class: "#{@class} hidden", **@attributes) do
+      div(style: { display: "none" }, **@attributes) do
         yield
 
         button(
@@ -145,8 +149,8 @@ module ShadcnPhlexcomponents
           labelledby: "#{@aria_id}-title",
         },
         data: {
-          dialog_target: "content",
-          action: "dialog:click:outside->dialog#close",
+          state: "closed",
+          dialog_target: "content"
         },
       }
     end

data/lib/shadcn_phlexcomponents/components/table.rb

@@ -10,7 +10,7 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(class: "relative w-full overflow-x-auto", data: { shadcn_phlexcomponents: "table-container" }) do
+      div(class: "relative w-full overflow-x-auto") do
         table(**@attributes, &)
       end
     end

data/lib/shadcn_phlexcomponents/components/tabs.rb

@@ -97,7 +97,7 @@ module ShadcnPhlexcomponents
           action: <<~HEREDOC,
             click->tabs#setActiveTab
             keydown.left->tabs#setActiveTab:prevent
-            keydown.right->tabs#setActiveToNext:prevent
+            keydown.right->tabs#setActiveTab:prevent
           HEREDOC
         },
       }

data/lib/shadcn_phlexcomponents/components/toast_container.rb

@@ -3,7 +3,7 @@
 module ShadcnPhlexcomponents
   class ToastContainer < Base
     class_variants(
-      base: "fixed z-[100] hidden has-[li]:flex flex-col gap-2",
+      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",

data/lib/shadcn_phlexcomponents/components/toggle.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+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,
+      },
+    )
+
+    def initialize(variant: :default, size: :default, on: false, **attributes)
+      @class_variants = { variant: variant, size: size }
+      @on = on
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        aria: {
+          pressed: @on.to_s,
+        },
+        data: {
+          controller: "toggle",
+          toggle_is_on_value: @on.to_s,
+          action: "click->toggle#toggle"
+        },
+      }
+    end
+
+    def view_template(&)
+      button(**@attributes, &)
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/tooltip.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Tooltip < Base
-    class_variants(base: "inline-block max-w-fit")
+    class_variants(base: "inline-flex max-w-fit")
 
     def initialize(open: false, **attributes)
       @open = open
@@ -93,7 +93,8 @@ module ShadcnPhlexcomponents
 
     def view_template(&)
       div(
-        class: "hidden fixed top-0 left-0 w-max z-50",
+        style: { display: "none" },
+        class: "fixed top-0 left-0 w-max z-50",
         data: { tooltip_target: "contentContainer" },
       ) do
         div(**@attributes) do

data/lib/shadcn_phlexcomponents/engine.rb

@@ -3,9 +3,5 @@
 require "rails"
 
 module ShadcnPhlexcomponents
-  class Engine < ::Rails::Engine
-    config.app_generators do |g|
-      g.template_engine(:shadcn_phlexcomponents)
-    end
-  end
+  class Engine < ::Rails::Engine; end
 end

data/lib/shadcn_phlexcomponents/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: shadcn_phlexcomponents
 version: !ruby/object:Gem::Version
-  version: 0.1.11
+  version: 0.1.14
 platform: ruby
 authors:
 - Sean Yeoh
@@ -74,17 +74,16 @@ files:
 - README.md
 - Rakefile
 - app/javascript/controllers/accordion_controller.ts
+- app/javascript/controllers/alert_dialog_controller.ts
 - app/javascript/controllers/avatar_controller.ts
 - app/javascript/controllers/checkbox_controller.ts
 - app/javascript/controllers/collapsible_controller.ts
 - app/javascript/controllers/combobox_controller.ts
 - app/javascript/controllers/command_controller.ts
-- app/javascript/controllers/command_root_controller.ts
 - app/javascript/controllers/date_picker_controller.ts
 - app/javascript/controllers/date_range_picker_controller.ts
 - app/javascript/controllers/dialog_controller.ts
 - app/javascript/controllers/dropdown_menu_controller.ts
-- app/javascript/controllers/dropdown_menu_root_controller.ts
 - app/javascript/controllers/dropdown_menu_sub_controller.ts
 - app/javascript/controllers/form_field_controller.ts
 - app/javascript/controllers/hover_card_controller.ts
@@ -101,9 +100,13 @@ files:
 - app/javascript/controllers/theme_switcher_controller.ts
 - app/javascript/controllers/toast_container_controller.ts
 - app/javascript/controllers/toast_controller.ts
+- app/javascript/controllers/toggle_controller.ts
+- app/javascript/controllers/toggle_group_controller.ts
 - app/javascript/controllers/tooltip_controller.ts
 - app/javascript/shadcn_phlexcomponents.ts
-- app/javascript/utils.ts
+- app/javascript/utils/command.ts
+- app/javascript/utils/floating_ui.ts
+- app/javascript/utils/index.ts
 - app/stylesheets/date_picker.css
 - app/stylesheets/nouislider.css
 - app/stylesheets/tw-animate.css
@@ -133,6 +136,7 @@ files:
 - lib/shadcn_phlexcomponents/components/form.rb
 - lib/shadcn_phlexcomponents/components/form/form_checkbox.rb
 - lib/shadcn_phlexcomponents/components/form/form_checkbox_group.rb
+- lib/shadcn_phlexcomponents/components/form/form_combobox.rb
 - lib/shadcn_phlexcomponents/components/form/form_date_picker.rb
 - lib/shadcn_phlexcomponents/components/form/form_date_range_picker.rb
 - lib/shadcn_phlexcomponents/components/form/form_error.rb
@@ -165,6 +169,7 @@ files:
 - lib/shadcn_phlexcomponents/components/theme_switcher.rb
 - lib/shadcn_phlexcomponents/components/toast.rb
 - lib/shadcn_phlexcomponents/components/toast_container.rb
+- lib/shadcn_phlexcomponents/components/toggle.rb
 - lib/shadcn_phlexcomponents/components/tooltip.rb
 - lib/shadcn_phlexcomponents/engine.rb
 - lib/shadcn_phlexcomponents/initializers/shadcn_phlexcomponents.rb