ruby_ui 1.4.0 → 1.6.0

data/lib/ruby_ui/input_otp/input_otp_slot.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class InputOtpSlot < Base
+    def initialize(index:, **attrs)
+      @index = index
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria_hidden: "true",
+        data: {
+          ruby_ui__input_otp_target: "slot",
+          index: @index
+        },
+        class: [
+          "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all",
+          "first:rounded-l-md first:border-l last:rounded-r-md",
+          "data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/50",
+          "data-[caret=true]:after:content-[''] data-[caret=true]:after:absolute data-[caret=true]:after:h-4 data-[caret=true]:after:w-px data-[caret=true]:after:animate-caret-blink data-[caret=true]:after:bg-foreground",
+          "aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40"
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/message/message.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Message < Base
+    def initialize(align: :start, **attrs)
+      @align = align
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "message", align: @align},
+        class: "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse"
+      }
+    end
+  end
+end

data/lib/ruby_ui/message/message_avatar.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class MessageAvatar < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "message-avatar"},
+        class: "flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8"
+      }
+    end
+  end
+end

data/lib/ruby_ui/message/message_content.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class MessageContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "message-content"},
+        class: "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:[&>[data-slot]]:self-end"
+      }
+    end
+  end
+end

data/lib/ruby_ui/message/message_docs.rb

@@ -0,0 +1,173 @@
+# frozen_string_literal: true
+
+class Views::Docs::Message < Views::Base
+  def view_template
+    component = "Message"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Message", description: "A chat message layout that pairs an avatar with bubbles, headers, and footers. Built on top of Avatar and Bubble.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Conversation", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col gap-6") do
+            Message(align: :end) do
+              MessageAvatar do
+                Avatar(size: :sm) do
+                  AvatarImage(src: "https://github.com/joeldrapper.png", alt: "@me")
+                  AvatarFallback { "ME" }
+                end
+              end
+              MessageContent do
+                Bubble do
+                  BubbleContent { "Deploying to prod real quick." }
+                end
+              end
+            end
+
+            Message do
+              MessageAvatar do
+                Avatar(size: :sm) do
+                  AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
+                  AvatarFallback { "R" }
+                end
+              end
+              MessageContent do
+                Bubble(variant: :muted) do
+                  BubbleContent { "It's 4:55 PM. On a Friday." }
+                end
+              end
+            end
+
+            Message(align: :end) do
+              MessageAvatar do
+                Avatar(size: :sm) do
+                  AvatarImage(src: "https://github.com/joeldrapper.png", alt: "@me")
+                  AvatarFallback { "ME" }
+                end
+              end
+              MessageContent do
+                Bubble do
+                  BubbleContent { "It's a one-line change." }
+                end
+                MessageFooter { "Delivered" }
+              end
+            end
+
+            Message do
+              MessageAvatar do
+                Avatar(size: :sm) do
+                  AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
+                  AvatarFallback { "R" }
+                end
+              end
+              MessageContent do
+                BubbleGroup do
+                  Bubble(variant: :muted) do
+                    BubbleContent { "It's always a one-line change 😭." }
+                  end
+                  Bubble(variant: :muted) do
+                    BubbleContent { "Alright, let me take a look." }
+                    BubbleReactions(role: "img", aria_label: "Reaction: thumbs up") do
+                      span { "👍" }
+                    end
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "With header" }
+
+      render Docs::VisualCodeExample.new(title: "Header and footer", context: self) do
+        <<~RUBY
+          Message do
+            MessageAvatar do
+              Avatar(size: :sm) do
+                AvatarImage(src: "https://github.com/shadcn.png", alt: "@oliver")
+                AvatarFallback { "OL" }
+              end
+            end
+            MessageContent do
+              MessageHeader { "Oliver" }
+              Bubble(variant: :muted) do
+                BubbleContent { "Pushed the fix, can you review?" }
+              end
+              MessageFooter { "9:41 AM" }
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Alignment" }
+
+      render Docs::VisualCodeExample.new(title: "Sender and receiver", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col gap-6") do
+            Message do
+              MessageAvatar do
+                Avatar(size: :sm) do
+                  AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
+                  AvatarFallback { "R" }
+                end
+              end
+              MessageContent do
+                Bubble(variant: :muted) { BubbleContent { "Aligned to the start." } }
+              end
+            end
+            Message(align: :end) do
+              MessageAvatar do
+                Avatar(size: :sm) do
+                  AvatarImage(src: "https://github.com/joeldrapper.png", alt: "@me")
+                  AvatarFallback { "ME" }
+                end
+              end
+              MessageContent do
+                Bubble { BubbleContent { "Aligned to the end." } }
+              end
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Group" }
+
+      render Docs::VisualCodeExample.new(title: "Message group", context: self) do
+        <<~RUBY
+          MessageGroup do
+            Message do
+              MessageAvatar do
+                Avatar(size: :sm) do
+                  AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
+                  AvatarFallback { "R" }
+                end
+              end
+              MessageContent do
+                Bubble(variant: :muted) { BubbleContent { "First message." } }
+              end
+            end
+            Message do
+              MessageAvatar do
+                Avatar(size: :sm) do
+                  AvatarImage(src: "https://github.com/shadcn.png", alt: "@rabbit")
+                  AvatarFallback { "R" }
+                end
+              end
+              MessageContent do
+                Bubble(variant: :muted) { BubbleContent { "Second, tighter spacing." } }
+              end
+            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/message/message_footer.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class MessageFooter < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "message-footer"},
+        class: "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-data-[align=end]/message:justify-end group-has-data-[variant=ghost]/message:px-0"
+      }
+    end
+  end
+end

data/lib/ruby_ui/message/message_group.rb

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

data/lib/ruby_ui/message/message_header.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class MessageHeader < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "message-header"},
+        class: "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0"
+      }
+    end
+  end
+end

data/lib/ruby_ui/message_scroller/message_scroller.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class MessageScroller < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "message-scroller"},
+        class: "group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden"
+      }
+    end
+  end
+end

data/lib/ruby_ui/message_scroller/message_scroller_button.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class MessageScrollerButton < Base
+    def initialize(direction: :end, **attrs)
+      @direction = direction
+      super(**attrs)
+    end
+
+    def view_template(&)
+      button(**attrs) do
+        if block_given?
+          yield
+        else
+          default_icon
+          span(class: "sr-only") { (@direction == :start) ? "Scroll to start" : "Scroll to end" }
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "button",
+        tabindex: "-1",
+        data: {
+          slot: "message-scroller-button",
+          direction: @direction,
+          active: "false",
+          ruby_ui__message_scroller_target: "button",
+          action: "click->ruby-ui--message-scroller#jump"
+        },
+        class: "absolute left-1/2 z-10 -translate-x-1/2 inline-flex size-8 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-sm transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full data-[direction=start]:[&_svg]:rotate-180"
+      }
+    end
+
+    def default_icon
+      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: "size-4"
+      ) do |s|
+        s.path(d: "M12 5v14")
+        s.path(d: "m19 12-7 7-7-7")
+      end
+    end
+  end
+end

data/lib/ruby_ui/message_scroller/message_scroller_content.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class MessageScrollerContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "log",
+        aria_relevant: "additions text",
+        data: {
+          slot: "message-scroller-content",
+          ruby_ui__message_scroller_target: "content"
+        },
+        class: "flex h-max min-h-full flex-col gap-8"
+      }
+    end
+  end
+end