ruby_ui 1.4.0 → 1.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c8dd00d73934f8ff9e2ac4e92994de33c910192f92df634def1e1726bde86393
-  data.tar.gz: 50ba081c5c25aa85581620726935ca1469b402751eade75cdb8adbc2042160d5
+  metadata.gz: 2d65c0b25a3f006ce2a97107b84779fb313f55fe0937048f033a8a4477ee5bda
+  data.tar.gz: fccde45b64530b69c9c1b3330f2203da5d4921a2b89a48dbc25ae2d27f8d36fd
 SHA512:
-  metadata.gz: 44150fd27560c0b3a7d5193501abfd755e36a15ae74dc555088b9a30a1b228adc521dd8a82fc705e3c2396a45bb0baf48aed1351840d96aaa87eae6a9c2d545d
-  data.tar.gz: fc536b32afeabc805ad4815ce9be98090caf2402e6c5cc920011d9166b721690eb35938195b5079bf44b7400c4ec5454642f00ea844df22062ef326e32316bc4
+  metadata.gz: ed144e39bf1a8cdf62f5550a9fdf1426cbc609979dbc7049c33c9c0e6fac737adffad32bbe5f21dd21c6de8b974ffe5c61a9ebd24011001411edac378629b416
+  data.tar.gz: 158aa2d122d94feadfb41ebd67e6e2078cf3b8ef9675fb94f23d228e0d27fcfb3b206e46a6f8bf47c3f8ede71b8c68e32c18db7ff9a8e3188f5a000138142d4e

data/lib/generators/ruby_ui/dependencies.yml

@@ -40,7 +40,7 @@ command:
 
 context_menu:
   js_packages:
-    - "tippy.js"
+    - "@floating-ui/dom"
 
 date_picker:
   components:
@@ -64,7 +64,7 @@ dropdown_menu:
 
 hover_card:
   js_packages:
-    - "tippy.js"
+    - "@floating-ui/dom"
 
 masked_input:
   components:
@@ -73,6 +73,16 @@ masked_input:
   js_packages:
     - "maska"
 
+message:
+  components:
+    - "Avatar"
+    - "Bubble"
+
+message_scroller:
+  components:
+    - "Message"
+    - "Bubble"
+
 pagination:
   components:
     - "Button"

data/lib/generators/ruby_ui/javascript_utils.rb

@@ -25,8 +25,6 @@ module RubyUI
           pin_motion
         when "tw-animate-css"
           pin_tw_animate_css
-        when "tippy.js"
-          pin_tippy_js
         else
           run "bin/importmap pin #{package}"
         end
@@ -65,17 +63,6 @@ module RubyUI
         RUBY
       end
 
-      def pin_tippy_js
-        say <<~TEXT
-          WARNING: Installing tippy.js from CDN because `bin/importmap pin tippy.js` doesn't download the correct file.
-        TEXT
-
-        inject_into_file rails_root.join("config/importmap.rb"), <<~RUBY
-          pin "tippy.js", to: "https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/+esm"
-          pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/+esm"\n
-        RUBY
-      end
-
       def rails_root = Rails.root
     end
   end

data/lib/ruby_ui/accordion/accordion_controller.js

@@ -79,7 +79,11 @@ export default class extends Controller {
         duration: this.animationDurationValue,
         easing: this.animationEasingValue,
       },
-    );
+    )
+      .finished.then(() => {
+        if (content.dataset.state === "open") content.style.height = "auto";
+      })
+      .catch(() => {});
   }
 
   // Hide the accordion content with animation
@@ -87,20 +91,23 @@ export default class extends Controller {
     const content = this.contentTarget;
     content.dataset.state = "closed";
 
+    const currentHeight = content.getBoundingClientRect().height;
     animate(
       content,
-      { height: 0 },
+      { height: [`${currentHeight}px`, "0px"] },
       {
         duration: this.animationDurationValue,
         easing: this.animationEasingValue,
       },
-    ).finished.then(() => {
-      // After animation completes, truly hide the element so it is removed
-      // from layout and form focus — prevents trapped validation errors
-      if (content.dataset.state === "closed") {
-        content.setAttribute("hidden", "");
-      }
-    });
+    )
+      .finished.then(() => {
+        // After animation completes, truly hide the element so it is removed
+        // from layout and form focus — prevents trapped validation errors
+        if (content.dataset.state === "closed") {
+          content.setAttribute("hidden", "");
+        }
+      })
+      .catch(() => {});
   }
 
   // Rotate the accordion icon 180deg using animate function

data/lib/ruby_ui/bubble/bubble.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Bubble < Base
+    VARIANTS = {
+      default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+      secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+      muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+      tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+      outline: "*:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+      ghost: "*:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50 border-none",
+      destructive: "*:data-[slot=bubble-content]:bg-destructive/10 dark:*:data-[slot=bubble-content]:bg-destructive/20 *:data-[slot=bubble-content]:text-destructive [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+    }
+
+    def initialize(variant: :default, align: :start, **attrs)
+      @variant = variant
+      @align = align
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "bubble", variant: @variant, align: @align},
+        class: [
+          "group/bubble relative flex w-fit min-w-0 flex-col gap-1 max-w-[80%] data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+          VARIANTS[@variant]
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/bubble/bubble_content.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BubbleContent < Base
+    def initialize(as: :div, **attrs)
+      @as = as
+      super(**attrs)
+    end
+
+    def view_template(&)
+      send(@as, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "bubble-content"},
+        class: "w-fit max-w-full min-w-0 overflow-hidden wrap-break-word rounded-3xl border border-transparent px-3 py-2.5 text-sm leading-relaxed group-data-[align=end]/bubble:self-end [&:is(button,a)]:text-left [&:is(button,a)]:outline-none [&:is(button,a)]:transition-colors [&:is(button,a):focus-visible]:border-ring [&:is(button,a):focus-visible]:ring-3 [&:is(button,a):focus-visible]:ring-ring/30"
+      }
+    end
+  end
+end

data/lib/ruby_ui/bubble/bubble_docs.rb

@@ -0,0 +1,167 @@
+# frozen_string_literal: true
+
+class Views::Docs::Bubble < Views::Base
+  def view_template
+    component = "Bubble"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Bubble", description: "A chat bubble surface for displaying conversational content, with variants, alignment, grouping, and reactions.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Default", context: self) do
+        <<~RUBY
+          Bubble(align: :end) do
+            BubbleContent { "Hey there! what's up?" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Conversation", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col gap-8") do
+            Bubble(align: :end) do
+              BubbleContent { "Hey there! what's up?" }
+            end
+            BubbleGroup do
+              Bubble(variant: :muted) do
+                BubbleContent { "Hey! Want to see chat bubbles?" }
+              end
+              Bubble(variant: :muted) do
+                BubbleContent { "I can group messages, switch sides, and keep the whole thread easy to scan." }
+                BubbleReactions(role: "img", aria_label: "Reaction: thumbs up") do
+                  span { "👍" }
+                end
+              end
+            end
+            Bubble(align: :end) do
+              BubbleContent { "Sure. Hit me with your best demo." }
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Variants" }
+
+      render Docs::VisualCodeExample.new(title: "Variants", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col gap-4 w-full") do
+            Bubble(variant: :default) { BubbleContent { "Default" } }
+            Bubble(variant: :secondary) { BubbleContent { "Secondary" } }
+            Bubble(variant: :muted) { BubbleContent { "Muted" } }
+            Bubble(variant: :tinted) { BubbleContent { "Tinted" } }
+            Bubble(variant: :outline) { BubbleContent { "Outline" } }
+            Bubble(variant: :ghost) { BubbleContent { "Ghost — unframed, full width for assistant text or markdown." } }
+            Bubble(variant: :destructive) { BubbleContent { "Destructive — something went wrong." } }
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Alignment" }
+
+      render Docs::VisualCodeExample.new(title: "Start and end", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col gap-4 w-full") do
+            Bubble(align: :start, variant: :muted) do
+              BubbleContent { "Aligned to the start (receiver)." }
+            end
+            Bubble(align: :end) do
+              BubbleContent { "Aligned to the end (sender)." }
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Reactions" }
+
+      render Docs::VisualCodeExample.new(title: "Reactions", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col gap-10 w-full py-6") do
+            Bubble(variant: :muted) do
+              BubbleContent { "Reactions anchor to the bubble edge." }
+              BubbleReactions(role: "img", aria_label: "Reactions: thumbs up, fire, eyes, and 2 more") do
+                span { "👍" }
+                span { "🔥" }
+                span { "👀" }
+                span { "+2" }
+              end
+            end
+            Bubble(align: :end) do
+              BubbleContent { "Place them on top and to the start too." }
+              BubbleReactions(side: :top, align: :start, role: "img", aria_label: "Reaction: heart") do
+                span { "❤️" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Group" }
+
+      render Docs::VisualCodeExample.new(title: "Bubble group", context: self) do
+        <<~RUBY
+          BubbleGroup do
+            Bubble(variant: :muted) { BubbleContent { "First message in the group." } }
+            Bubble(variant: :muted) { BubbleContent { "Second one, tighter spacing." } }
+            Bubble(variant: :muted) { BubbleContent { "Third, all stacked together." } }
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Link or button bubble" }
+
+      render Docs::VisualCodeExample.new(title: "Interactive content", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col gap-4 w-full") do
+            Bubble(align: :end) do
+              BubbleContent(as: :a, href: "#") { "Tap to open the link →" }
+            end
+            Bubble(variant: :outline) do
+              BubbleContent(as: :button, type: "button") { "Retry sending" }
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "With Tooltip" }
+
+      render Docs::VisualCodeExample.new(title: "Reveal metadata on hover", context: self) do
+        <<~RUBY
+          Tooltip do
+            TooltipTrigger(class: "w-fit") do
+              Bubble(variant: :muted, class: "max-w-none") do
+                BubbleContent { "Read 9:41 AM" }
+              end
+            end
+            TooltipContent do
+              Text { "Delivered and read" }
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "With Popover" }
+
+      render Docs::VisualCodeExample.new(title: "Surface details on demand", context: self) do
+        <<~RUBY
+          Popover do
+            PopoverTrigger do
+              Bubble(variant: :destructive, class: "max-w-none") do
+                BubbleContent { "Message failed to send" }
+              end
+            end
+            PopoverContent(class: "w-64") do
+              Text(weight: :semibold) { "Delivery error" }
+              Text(size: :sm, class: "text-muted-foreground") { "The recipient's inbox is full. Try again later." }
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      # components
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/bubble/bubble_group.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BubbleGroup < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "bubble-group"},
+        class: "flex min-w-0 flex-col gap-2"
+      }
+    end
+  end
+end

data/lib/ruby_ui/bubble/bubble_reactions.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BubbleReactions < Base
+    SIDES = {
+      top: "top-0 -translate-y-3/4",
+      bottom: "bottom-0 translate-y-3/4"
+    }
+
+    ALIGNS = {
+      start: "left-3",
+      end: "right-3"
+    }
+
+    def initialize(side: :bottom, align: :end, **attrs)
+      @side = side
+      @align = align
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "bubble-reactions", side: @side, align: @align},
+        class: [
+          "absolute z-10 flex w-fit items-center justify-center rounded-full ring-3 ring-card bg-muted shrink-0 gap-1 px-1.5 py-0.5 has-[button]:p-0 text-sm",
+          SIDES[@side],
+          ALIGNS[@align]
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox.rb

@@ -2,8 +2,9 @@
 
 module RubyUI
   class Combobox < Base
-    def initialize(term: nil, **)
+    def initialize(term: nil, placement: "bottom-start", **)
       @term = term
+      @placement = placement
       super(**)
     end
 
@@ -19,6 +20,7 @@ module RubyUI
         data: {
           controller: "ruby-ui--combobox",
           ruby_ui__combobox_term_value: @term,
+          ruby_ui__combobox_placement_value: @placement,
           action: "turbo:morph@window->ruby-ui--combobox#updateTriggerContent"
         }
       }

data/lib/ruby_ui/combobox/combobox_checkbox.rb

@@ -19,7 +19,14 @@ module RubyUI
         ],
         data: {
           ruby_ui__combobox_target: "input",
-          action: "ruby-ui--combobox#inputChanged"
+          ruby_ui__checkbox_group_target: "checkbox",
+          ruby_ui__form_field_target: "input",
+          action: %w[
+            ruby-ui--combobox#inputChanged
+            change->ruby-ui--checkbox-group#onChange
+            change->ruby-ui--form-field#onInput
+            invalid->ruby-ui--form-field#onInvalid
+          ]
         }
       }
     end

data/lib/ruby_ui/combobox/combobox_controller.js

@@ -5,7 +5,8 @@ import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
 export default class extends Controller {
   static values = {
     term: String,
-    minPopoverWidth: { type: Number, default: 240 }
+    minPopoverWidth: { type: Number, default: 240 },
+    placement: { type: String, default: "bottom-start" }
   }
 
   static targets = [
@@ -175,7 +176,7 @@ export default class extends Controller {
   updatePopoverPosition() {
     this.cleanup = autoUpdate(this.triggerTarget, this.popoverTarget, () => {
       computePosition(this.triggerTarget, this.popoverTarget, {
-        placement: 'bottom-start',
+        placement: this.placementValue,
         middleware: [offset(4), flip()],
       }).then(({ x, y }) => {
         Object.assign(this.popoverTarget.style, {

data/lib/ruby_ui/combobox/combobox_trigger.rb

@@ -52,10 +52,7 @@ module RubyUI
         stroke_linejoin: "round"
       ) do |s|
         s.path(
-          d: "m7 15 5 5 5-5"
-        )
-        s.path(
-          d: "m7 9 5-5 5 5"
+          d: "m6 9 6 6 6-6"
         )
       end
     end

data/lib/ruby_ui/context_menu/context_menu_content.rb

@@ -2,10 +2,8 @@
 
 module RubyUI
   class ContextMenuContent < Base
-    def view_template(&block)
-      template(data: {ruby_ui__context_menu_target: "content"}) do
-        div(**attrs, &block)
-      end
+    def view_template(&)
+      div(**attrs, &)
     end
 
     private
@@ -14,9 +12,10 @@ module RubyUI
       {
         role: "menu",
         aria_orientation: "vertical",
-        data_state: "open",
+        data_state: "closed",
+        data: {ruby_ui__context_menu_target: "content"},
         class:
-              "z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md 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",
+              "hidden absolute z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md 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",
         tabindex: "-1",
         data_orientation: "vertical"
       }