ruby_ui 1.2.0 → 1.3.0

data/lib/ruby_ui/command/command_dialog_trigger.rb

@@ -8,7 +8,7 @@ module RubyUI
     ].freeze
 
     def initialize(keybindings: DEFAULT_KEYBINDINGS, **attrs)
-      @keybindings = keybindings.map { |kb| "#{kb}->ruby-ui--command#open" }
+      @keybindings = keybindings.map { |kb| "#{kb}->ruby-ui--command-dialog#open" }
       super(**attrs)
     end
 
@@ -21,7 +21,7 @@ module RubyUI
     def default_attrs
       {
         data: {
-          action: ["click->ruby-ui--command#open", @keybindings.join(" ")]
+          action: ["click->ruby-ui--command-dialog#open", @keybindings.join(" ")]
         }
       }
     end

data/lib/ruby_ui/date_picker/date_picker.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+require "securerandom"
+
+module RubyUI
+  class DatePicker < Base
+    def initialize(
+      id: nil,
+      name: nil,
+      label: "Select a date",
+      value: nil,
+      placeholder: "Select a date",
+      selected_date: value,
+      date_format: "yyyy-MM-dd",
+      popover_options: {},
+      input_attrs: {},
+      calendar_attrs: {},
+      trigger_attrs: {},
+      content_attrs: {},
+      **attrs
+    )
+      @id = id || "date-picker-#{SecureRandom.hex(4)}"
+      @name = name
+      @label = label
+      @value = value || selected_date&.to_s
+      @placeholder = placeholder
+      @selected_date = selected_date
+      @date_format = date_format
+      @popover_options = {trigger: "click"}.merge(popover_options)
+      @input_attrs = input_attrs
+      @calendar_attrs = calendar_attrs
+      @trigger_attrs = trigger_attrs
+      @content_attrs = content_attrs
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        RubyUI.Popover(options: @popover_options) do
+          RubyUI.PopoverTrigger(**trigger_attrs) do
+            div(class: "grid w-full max-w-sm items-center gap-1.5") do
+              label(for: @id) { @label } if @label
+              RubyUI.Input(**input_attrs)
+            end
+          end
+          RubyUI.PopoverContent(**content_attrs) do
+            RubyUI.Calendar(input_id: "##{@id}", selected_date: @selected_date, date_format: @date_format, **calendar_attrs)
+          end
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "space-y-4 w-[260px]"
+      }
+    end
+
+    def trigger_attrs
+      mix({class: "w-full"}, @trigger_attrs)
+    end
+
+    def input_attrs
+      mix({
+        type: "string",
+        placeholder: @placeholder,
+        id: @id,
+        name: @name,
+        value: @value,
+        data_controller: "ruby-ui--calendar-input",
+        class: "rounded-md border shadow"
+      }.compact, @input_attrs)
+    end
+
+    def calendar_attrs
+      mix({}, @calendar_attrs)
+    end
+
+    def content_attrs
+      mix({}, @content_attrs)
+    end
+  end
+end

data/lib/ruby_ui/date_picker/date_picker_docs.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class Views::Docs::DatePicker < Views::Base
+  def view_template
+    component = "DatePicker"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Date Picker", description: "A date picker component with input.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Single Date", context: self) do
+        <<~RUBY
+          DatePicker(id: "date")
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/masked_input/masked_input.rb

@@ -2,18 +2,8 @@
 
 module RubyUI
   class MaskedInput < Base
-    def initialize(save_unmasked: false, **attrs)
-      @save_unmasked = save_unmasked
-      super(**attrs)
-    end
-
     def view_template
-      if @save_unmasked
-        Input(type: "text", **attrs.merge(name: "#{attrs[:name]}-masked"))
-        input(type: "hidden", name: attrs[:name], value: attrs[:value])
-      else
-        Input(type: "text", **attrs)
-      end
+      Input(type: "text", **attrs)
     end
 
     private

data/lib/ruby_ui/masked_input/masked_input_controller.js

@@ -5,18 +5,5 @@ import { MaskInput } from "maska";
 export default class extends Controller {
   connect() {
     new MaskInput(this.element)
-    this.#boundSync = this.#sync.bind(this);
-    this.element.addEventListener("maska", this.#boundSync);
-  }
-
-  disconnect() {
-    this.element.removeEventListener("maska", this.#boundSync);
-  }
-
-  #boundSync = null;
-
-  #sync(event) {
-    const hidden = this.element.nextElementSibling;
-    if (hidden?.type === "hidden") hidden.value = event.detail.unmasked;
   }
 }

data/lib/ruby_ui/select/select_value.rb

@@ -9,7 +9,8 @@ module RubyUI
 
     def view_template(&block)
       span(**attrs) do
-        block ? block.call : @placeholder
+        value = block ? block.call : @placeholder
+        value || @placeholder
       end
     end
 

data/lib/ruby_ui/sheet/sheet.rb

@@ -2,6 +2,11 @@
 
 module RubyUI
   class Sheet < Base
+    def initialize(open: false, **attrs)
+      @open = open
+      super(**attrs)
+    end
+
     def view_template(&)
       div(**attrs, &)
     end
@@ -10,7 +15,10 @@ module RubyUI
 
     def default_attrs
       {
-        data: {controller: "ruby-ui--sheet"}
+        data: {
+          controller: "ruby-ui--sheet",
+          ruby_ui__sheet_open_value: @open.to_s
+        }
       }
     end
   end

data/lib/ruby_ui/sheet/sheet_controller.js

@@ -3,6 +3,12 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ["content"]
 
+  static values = { open: false }
+
+  connect() {
+    if (this.openValue) this.open()
+  }
+
   open() {
     document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML)
   }

data/lib/ruby_ui/theme_toggle/theme_toggle.rb

@@ -2,8 +2,20 @@
 
 module RubyUI
   class ThemeToggle < Base
-    def view_template(&)
-      div(**attrs, &)
+    def view_template(&block)
+      RubyUI.Toggle(
+        variant: :default,
+        size: :default,
+        aria: {label: "Toggle theme"},
+        wrapper: {
+          data: {
+            controller: "ruby-ui--theme-toggle",
+            action: "ruby-ui--toggle:change->ruby-ui--theme-toggle#apply"
+          }
+        },
+        **attrs,
+        &block
+      )
     end
   end
 end

data/lib/ruby_ui/theme_toggle/theme_toggle_controller.js

@@ -1,30 +1,38 @@
 import { Controller } from "@hotwired/stimulus"
 
+// Connects to data-controller="ruby-ui--theme-toggle"
+// Sits on the same wrapper as ruby-ui--toggle. Listens for the toggle's
+// ruby-ui--toggle:change event. pressed = dark mode.
 export default class extends Controller {
-  initialize() {
-    this.setTheme()
+  connect() {
+    this.applyTheme(this.currentTheme())
   }
 
-  setTheme() {
-    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
-    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.remove('dark')
-      document.documentElement.classList.add('light')
-    }
+  apply(event) {
+    const pressed = event.detail?.pressed
+    const theme = pressed ? "dark" : "light"
+    localStorage.theme = theme
+    this.applyTheme(theme)
   }
 
-  setLightTheme() {
-    // Whenever the user explicitly chooses light mode
-    localStorage.theme = 'light'
-    this.setTheme()
+  currentTheme() {
+    if (localStorage.theme === "dark") return "dark"
+    if (localStorage.theme === "light") return "light"
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
   }
 
-  setDarkTheme() {
-    // Whenever the user explicitly chooses dark mode
-    localStorage.theme = 'dark'
-    this.setTheme()
+  applyTheme(theme) {
+    const html = document.documentElement
+    if (theme === "dark") {
+      html.classList.add("dark")
+      html.classList.remove("light")
+    } else {
+      html.classList.add("light")
+      html.classList.remove("dark")
+    }
+    // Flip the sibling Toggle controller's pressed value; it will propagate
+    // aria-pressed / data-state to the button target.
+    const dark = theme === "dark"
+    this.element.setAttribute("data-ruby-ui--toggle-pressed-value", dark ? "true" : "false")
   }
 }

data/lib/ruby_ui/theme_toggle/theme_toggle_docs.rb

@@ -11,39 +11,17 @@ class Views::Docs::ThemeToggle < Views::Base
 
       render Docs::VisualCodeExample.new(title: "With icon", context: self) do
         <<~RUBY
-          ThemeToggle do |toggle|
-            SetLightMode do
-              Button(variant: :ghost, icon: true) do
-                svg(
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewbox: "0 0 24 24",
-                  fill: "currentColor",
-                  class: "w-4 h-4"
-                ) do |s|
-                  s.path(
-                    d:
-                      "M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
-                  )
-                end
-              end
-            end
-
-            SetDarkMode do
-              Button(variant: :ghost, icon: true) do
-                svg(
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewbox: "0 0 24 24",
-                  fill: "currentColor",
-                  class: "w-4 h-4"
-                ) do |s|
-                  s.path(
-                    fill_rule: "evenodd",
-                    d:
-                      "M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z",
-                    clip_rule: "evenodd"
-                  )
-                end
-              end
+          ThemeToggle do
+            svg(
+              xmlns: "http://www.w3.org/2000/svg",
+              viewbox: "0 0 24 24",
+              fill: "currentColor",
+              class: "w-4 h-4"
+            ) do |s|
+              s.path(
+                d:
+                  "M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"
+              )
             end
           end
         RUBY
@@ -51,15 +29,7 @@ class Views::Docs::ThemeToggle < Views::Base
 
       render Docs::VisualCodeExample.new(title: "With text", context: self) do
         <<~RUBY
-          ThemeToggle do |toggle|
-            SetLightMode do
-              Button(variant: :primary) { "Light" }
-            end
-
-            SetDarkMode do
-              Button(variant: :primary) { "Dark" }
-            end
-          end
+          ThemeToggle { "Toggle Theme" }
         RUBY
       end
 

data/lib/ruby_ui/toast/toast.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  module Toast
+    FLASH_VARIANTS = {
+      "notice" => :info,
+      "alert" => :warning,
+      "success" => :success,
+      "error" => :error,
+      "warning" => :warning,
+      "info" => :info
+    }.freeze
+
+    def self.flash_variant(key)
+      FLASH_VARIANTS[key.to_s] || :default
+    end
+  end
+end

data/lib/ruby_ui/toast/toast_action.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastAction < Base
+    def initialize(label:, on: nil, **attrs)
+      @label = label
+      @on = on
+      super(**attrs)
+    end
+
+    def view_template
+      button(**attrs) { @label }
+    end
+
+    private
+
+    def default_attrs
+      data = {slot: "action"}
+      data[:action] = @on if @on
+      {
+        type: "button",
+        data: data,
+        class: "inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground text-background border-0 ml-auto hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-ring transition-opacity disabled:pointer-events-none disabled:opacity-50"
+      }
+    end
+  end
+end

data/lib/ruby_ui/toast/toast_cancel.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastCancel < Base
+    def initialize(label:, **attrs)
+      @label = label
+      super(**attrs)
+    end
+
+    def view_template
+      button(**attrs) { @label }
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "button",
+        data: {
+          slot: "cancel",
+          action: "click->ruby-ui--toast#dismiss"
+        },
+        class: "inline-flex h-6 shrink-0 cursor-pointer items-center justify-center rounded px-2 text-xs font-medium bg-foreground/10 text-foreground border-0 ml-auto hover:bg-foreground/15 focus:outline-none focus:ring-2 focus:ring-ring transition-colors"
+      }
+    end
+  end
+end

data/lib/ruby_ui/toast/toast_close.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastClose < Base
+    def view_template
+      button(**attrs) do
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "14",
+          height: "14",
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "size-3.5"
+        ) do |s|
+          s.path(d: "M18 6 6 18")
+          s.path(d: "m6 6 12 12")
+        end
+        span(class: "sr-only") { "Close" }
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "button",
+        aria_label: "Close toast",
+        data: {
+          slot: "close",
+          action: "click->ruby-ui--toast#dismiss"
+        },
+        class: "absolute right-2 top-2 size-6 cursor-pointer rounded-md text-foreground/60 p-0 flex items-center justify-center transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+      }
+    end
+  end
+end

data/lib/ruby_ui/toast/toast_controller.js

@@ -0,0 +1,151 @@
+import { Controller } from "@hotwired/stimulus"
+
+const SWIPE_THRESHOLD = 45
+const TIME_BEFORE_UNMOUNT = 200
+
+// Connects to data-controller="ruby-ui--toast"
+export default class extends Controller {
+  static values = {
+    duration: { type: Number, default: 4000 },
+    dismissible: { type: Boolean, default: true },
+    invert: { type: Boolean, default: false },
+    onDismiss: String,
+    onAutoClose: String,
+  }
+
+  connect() {
+    this._timer = null
+    this._startedAt = 0
+    this._remaining = this.durationValue
+    this._paused = false
+    this._swipe = { active: false, x: 0, y: 0, startedAt: 0 }
+
+    this._onPointerDown = this._onPointerDown.bind(this)
+    this._onPointerMove = this._onPointerMove.bind(this)
+    this._onPointerUp = this._onPointerUp.bind(this)
+    this._onPointerEnter = () => this._pause()
+    this._onPointerLeave = () => { if (!this._swipe.active) this._resume() }
+    this._onKeyDown = this._onKeyDown.bind(this)
+    this._onForceDismiss = (e) => { e.stopPropagation(); this._close() }
+    this._onRestart = () => this._restart()
+    this._onRegionPause = () => this._pause()
+    this._onRegionResume = () => this._resume()
+
+    this.element.addEventListener("pointerdown", this._onPointerDown)
+    this.element.addEventListener("pointerenter", this._onPointerEnter)
+    this.element.addEventListener("pointerleave", this._onPointerLeave)
+    this.element.addEventListener("keydown", this._onKeyDown)
+    this.element.addEventListener("ruby-ui:toast:force-dismiss", this._onForceDismiss)
+    this.element.addEventListener("ruby-ui:toast:restart", this._onRestart)
+    document.addEventListener("ruby-ui:toast:pause", this._onRegionPause)
+    document.addEventListener("ruby-ui:toast:resume", this._onRegionResume)
+
+    requestAnimationFrame(() => {
+      this.element.dataset.state = "open"
+      this._start()
+    })
+  }
+
+  disconnect() {
+    this._clearTimer()
+    this.element.removeEventListener("pointerdown", this._onPointerDown)
+    this.element.removeEventListener("pointerenter", this._onPointerEnter)
+    this.element.removeEventListener("pointerleave", this._onPointerLeave)
+    this.element.removeEventListener("keydown", this._onKeyDown)
+    this.element.removeEventListener("ruby-ui:toast:force-dismiss", this._onForceDismiss)
+    this.element.removeEventListener("ruby-ui:toast:restart", this._onRestart)
+    document.removeEventListener("ruby-ui:toast:pause", this._onRegionPause)
+    document.removeEventListener("ruby-ui:toast:resume", this._onRegionResume)
+  }
+
+  dismiss(e) {
+    e?.preventDefault()
+    if (!this.dismissibleValue) return
+    this._close("dismiss")
+  }
+
+  _close(reason) {
+    if (this.element.dataset.state === "closing") return
+    this.element.dataset.state = "closing"
+    this.element.dispatchEvent(new CustomEvent(reason === "auto" ? "ruby-ui:toast:auto-close" : "ruby-ui:toast:dismiss", { bubbles: true, detail: { id: this.element.id } }))
+    setTimeout(() => this.element.remove(), TIME_BEFORE_UNMOUNT)
+  }
+
+  _start() {
+    if (!Number.isFinite(this.durationValue) || this.durationValue <= 0) return
+    this._startedAt = performance.now()
+    this._remaining = this.durationValue
+    this._timer = setTimeout(() => this._close("auto"), this._remaining)
+  }
+
+  _restart() {
+    this._clearTimer()
+    this._start()
+  }
+
+  _pause() {
+    if (this._paused || !this._timer) return
+    this._paused = true
+    clearTimeout(this._timer)
+    this._timer = null
+    this._remaining -= performance.now() - this._startedAt
+  }
+
+  _resume() {
+    if (!this._paused) return
+    this._paused = false
+    if (this._remaining <= 0) return this._close("auto")
+    this._startedAt = performance.now()
+    this._timer = setTimeout(() => this._close("auto"), this._remaining)
+  }
+
+  _clearTimer() {
+    if (this._timer) clearTimeout(this._timer)
+    this._timer = null
+  }
+
+  _onKeyDown(e) {
+    if (e.key === "Escape" && this.dismissibleValue) this.dismiss(e)
+  }
+
+  _onPointerDown(e) {
+    if (!this.dismissibleValue) return
+    if (e.target.closest("button")) return
+    try { this.element.setPointerCapture(e.pointerId) } catch {}
+    this._swipe = { active: true, x: e.clientX, y: e.clientY, startedAt: performance.now(), pointerId: e.pointerId }
+    this.element.dataset.swipe = "start"
+    this.element.addEventListener("pointermove", this._onPointerMove)
+    this.element.addEventListener("pointerup", this._onPointerUp)
+    this.element.addEventListener("pointercancel", this._onPointerUp)
+  }
+
+  _onPointerMove(e) {
+    const dx = e.clientX - this._swipe.x
+    const dy = e.clientY - this._swipe.y
+    this.element.dataset.swipe = "move"
+    this.element.style.transform = `translate(${dx}px, ${dy}px)`
+  }
+
+  _onPointerUp(e) {
+    const dx = e.clientX - this._swipe.x
+    const dy = e.clientY - this._swipe.y
+    const dist = Math.hypot(dx, dy)
+    const dt = performance.now() - this._swipe.startedAt
+    const velocity = dist / Math.max(dt, 1)
+    this.element.removeEventListener("pointermove", this._onPointerMove)
+    this.element.removeEventListener("pointerup", this._onPointerUp)
+    this.element.removeEventListener("pointercancel", this._onPointerUp)
+    this._swipe.active = false
+    if (dist > SWIPE_THRESHOLD || velocity > 0.5) {
+      this.element.style.setProperty("--swipe-end-x", `${Math.sign(dx) * 500}px`)
+      this.element.style.setProperty("--swipe-end-y", `${Math.sign(dy) * 500}px`)
+      this.element.dataset.swipe = "end"
+      this.element.style.transform = ""
+      this._close("dismiss")
+    } else {
+      this.element.dataset.swipe = "cancel"
+      this.element.style.transform = ""
+      this._resume()
+    }
+  }
+}

data/lib/ruby_ui/toast/toast_description.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastDescription < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "description"},
+        class: "font-normal leading-[1.4] text-muted-foreground"
+      }
+    end
+  end
+end

data/lib/ruby_ui/toast/toast_docs.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToastDocs < Phlex::HTML
+    def view_template
+      div(class: "space-y-4") do
+        h2 { "Toast" }
+        p { "Hotwire-native sonner port. Mount once; trigger via Turbo Stream or window.RubyUI.toast." }
+      end
+    end
+  end
+end