ruby_ui 1.3.0 → 1.6.0

data/lib/ruby_ui/input_otp/input_otp_docs.rb

@@ -0,0 +1,213 @@
+# frozen_string_literal: true
+
+class Views::Docs::InputOtp < Views::Base
+  def view_template
+    component = "InputOtp"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Input OTP", description: "Accessible one-time-password input with keyboard navigation and paste support.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          InputOtp(length: 6, name: "otp") do
+            InputOtpGroup do
+              InputOtpSlot(index: 0)
+              InputOtpSlot(index: 1)
+              InputOtpSlot(index: 2)
+              InputOtpSlot(index: 3)
+              InputOtpSlot(index: 4)
+              InputOtpSlot(index: 5)
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Composition" }
+
+      Text { "InputOtpGroup and InputOtpSeparator compose freely — split slots into however many groups make sense, with a separator between each." }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          InputOtp(length: 6, name: "otp") do
+            InputOtpGroup do
+              InputOtpSlot(index: 0)
+              InputOtpSlot(index: 1)
+            end
+            InputOtpSeparator()
+            InputOtpGroup do
+              InputOtpSlot(index: 2)
+              InputOtpSlot(index: 3)
+            end
+            InputOtpSeparator()
+            InputOtpGroup do
+              InputOtpSlot(index: 4)
+              InputOtpSlot(index: 5)
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Pattern" }
+
+      Text { "Pass pattern: with a single-character regex class to define what InputOtp accepts. The default is \"[0-9]\" (digits only)." }
+
+      render Docs::VisualCodeExample.new(title: "Alphanumeric", context: self) do
+        <<~RUBY
+          InputOtp(length: 6, name: "otp", pattern: "[0-9A-Za-z]") do
+            InputOtpGroup do
+              InputOtpSlot(index: 0)
+              InputOtpSlot(index: 1)
+              InputOtpSlot(index: 2)
+              InputOtpSlot(index: 3)
+              InputOtpSlot(index: 4)
+              InputOtpSlot(index: 5)
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Four digits" }
+
+      Text { "A common pattern for PIN codes — just pass a shorter length." }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          InputOtp(length: 4, name: "pin") do
+            InputOtpGroup do
+              InputOtpSlot(index: 0)
+              InputOtpSlot(index: 1)
+              InputOtpSlot(index: 2)
+              InputOtpSlot(index: 3)
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Disabled" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          InputOtp(length: 6, name: "otp", disabled: true) do
+            InputOtpGroup do
+              InputOtpSlot(index: 0)
+              InputOtpSlot(index: 1)
+              InputOtpSlot(index: 2)
+              InputOtpSlot(index: 3)
+              InputOtpSlot(index: 4)
+              InputOtpSlot(index: 5)
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Invalid" }
+
+      Text { "Pass aria_invalid: \"true\" to each InputOtpSlot to show an error state." }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          InputOtp(length: 6, name: "otp") do
+            InputOtpGroup do
+              InputOtpSlot(index: 0, aria_invalid: "true")
+              InputOtpSlot(index: 1, aria_invalid: "true")
+              InputOtpSlot(index: 2, aria_invalid: "true")
+              InputOtpSlot(index: 3, aria_invalid: "true")
+              InputOtpSlot(index: 4, aria_invalid: "true")
+              InputOtpSlot(index: 5, aria_invalid: "true")
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Form" }
+
+      Text { "A full example combining InputOtp with Card, Button, and InlineLink — bigger slots via class:, a resend action, and fallback links." }
+
+      render Docs::VisualCodeExample.new(title: "Verify your login", context: self) do
+        <<~RUBY
+          Card(class: "mx-auto max-w-md") do
+            CardHeader do
+              CardTitle { "Verify your login" }
+              CardDescription do
+                plain "Enter the verification code we sent to your email address: "
+                span(class: "font-medium") { "m@example.com" }
+                plain "."
+              end
+            end
+            CardContent(class: "space-y-4") do
+              div(class: "flex items-center justify-between") do
+                label(class: "text-sm font-medium") { "Verification code" }
+                Button(variant: :outline, size: :sm) do
+                  svg(
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewbox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    stroke_width: "2",
+                    stroke_linecap: "round",
+                    stroke_linejoin: "round",
+                    class: "w-4 h-4 mr-2"
+                  ) do |s|
+                    s.path(d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8")
+                    s.path(d: "M21 3v5h-5")
+                    s.path(d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16")
+                    s.path(d: "M8 16H3v5")
+                  end
+                  plain "Resend Code"
+                end
+              end
+              InputOtp(length: 6, name: "otp", required: true) do
+                InputOtpGroup do
+                  InputOtpSlot(index: 0, class: "h-12 w-11 text-xl")
+                  InputOtpSlot(index: 1, class: "h-12 w-11 text-xl")
+                  InputOtpSlot(index: 2, class: "h-12 w-11 text-xl")
+                end
+                InputOtpSeparator(class: "mx-2")
+                InputOtpGroup do
+                  InputOtpSlot(index: 3, class: "h-12 w-11 text-xl")
+                  InputOtpSlot(index: 4, class: "h-12 w-11 text-xl")
+                  InputOtpSlot(index: 5, class: "h-12 w-11 text-xl")
+                end
+              end
+              InlineLink(href: "#") { "I no longer have access to this email address." }
+            end
+            CardFooter(class: "flex flex-col items-stretch gap-2") do
+              Button(class: "w-full") { "Verify" }
+              Text(size: "sm", weight: "muted") do
+                plain "Having trouble signing in? "
+                InlineLink(href: "#") { "Contact support" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      Heading(level: 2) { "Reacting to completion" }
+
+      Text { "The controller dispatches a ruby-ui--input-otp:complete custom event (detail: { value }) once the value reaches length characters, and a ruby-ui--input-otp:input event on every change. Wire a Stimulus action on a parent element to react — for example, to auto-submit a form:" }
+
+      Codeblock(<<~JS, syntax: :javascript)
+        // app/javascript/controllers/otp_form_controller.js
+        import { Controller } from "@hotwired/stimulus"
+
+        export default class extends Controller {
+          submit() {
+            this.element.requestSubmit()
+          }
+        }
+      JS
+
+      Codeblock(<<~HTML, syntax: :html)
+        <form data-controller="otp-form" data-action="ruby-ui--input-otp:complete->otp-form#submit">
+          <!-- InputOtp(...) here -->
+        </form>
+      HTML
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/input_otp/input_otp_group.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class InputOtpGroup < Base
+    def view_template(&block)
+      div(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      {class: "flex items-center"}
+    end
+  end
+end

data/lib/ruby_ui/input_otp/input_otp_separator.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class InputOtpSeparator < Base
+    def view_template(&block)
+      div(**attrs) do
+        if block
+          block.call
+        else
+          icon
+        end
+      end
+    end
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        class: "h-4 w-4"
+      ) do |s|
+        s.path(d: "M5 12h14")
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "separator",
+        class: "text-muted-foreground"
+      }
+    end
+  end
+end

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