ruby_ui 1.2.0 → 1.3.0

data/lib/ruby_ui/toggle/toggle_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="ruby-ui--toggle"
+// Sits on a wrapper element; the visible <button> and optional hidden <input>
+// are descendants so Stimulus can target them.
+export default class extends Controller {
+  static targets = ["button", "input"]
+  static values = {
+    pressed: Boolean,
+    value: String,
+    unpressedValue: String
+  }
+
+  toggle(event) {
+    if (this.buttonTarget.disabled) return
+    this.pressedValue = !this.pressedValue
+  }
+
+  pressedValueChanged(current, previous) {
+    if (this.hasButtonTarget) {
+      this.buttonTarget.setAttribute("aria-pressed", current ? "true" : "false")
+      this.buttonTarget.dataset.state = current ? "on" : "off"
+    }
+
+    if (this.hasInputTarget) {
+      this.inputTarget.value = current ? this.valueValue : this.unpressedValueValue
+    }
+
+    if (previous !== undefined) {
+      this.dispatch("change", { detail: { pressed: current }, bubbles: true })
+    }
+  }
+}

data/lib/ruby_ui/toggle_group/toggle_group.rb

@@ -0,0 +1,119 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToggleGroup < Base
+    SPACING_GAP = {0 => nil, 1 => "gap-1", 2 => "gap-2", 3 => "gap-3", 4 => "gap-4"}.freeze
+    VALID_TYPES = [:single, :multiple].freeze
+    VALID_ORIENTATIONS = [:horizontal, :vertical].freeze
+
+    def initialize(
+      type: :single,
+      name: nil,
+      value: nil,
+      variant: :default,
+      size: :default,
+      disabled: false,
+      spacing: 0,
+      orientation: :horizontal,
+      **attrs
+    )
+      @type = type.to_sym
+      raise ArgumentError, "type must be :single or :multiple" unless VALID_TYPES.include?(@type)
+
+      @orientation = orientation.to_sym
+      raise ArgumentError, "orientation must be :horizontal or :vertical" unless VALID_ORIENTATIONS.include?(@orientation)
+
+      raise ArgumentError, "spacing must be an Integer 0..4" unless spacing.is_a?(Integer) && (0..4).cover?(spacing)
+
+      @name = name
+      @value = value
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @disabled = disabled
+      @spacing = spacing
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        yield(self)
+        render_hidden_inputs
+      end
+    end
+
+    def item_context
+      {
+        type: @type,
+        variant: @variant,
+        size: @size,
+        disabled: @disabled,
+        selected_values: selected_values,
+        spacing: @spacing,
+        orientation: @orientation
+      }
+    end
+
+    def ToggleGroupItem(**kwargs, &block)
+      render RubyUI::ToggleGroupItem.new(group_context: item_context, **kwargs), &block
+    end
+
+    private
+
+    def selected_values
+      case @type
+      when :single then @value.nil? ? [] : [@value.to_s]
+      when :multiple then Array(@value).map(&:to_s)
+      end
+    end
+
+    def render_hidden_inputs
+      return unless @name
+
+      if @type == :single
+        input(
+          type: "hidden",
+          name: @name,
+          value: selected_values.first.to_s,
+          data: {"ruby-ui--toggle-group-target": "input"}
+        )
+      else
+        selected_values.each do |v|
+          input(
+            type: "hidden",
+            name: "#{@name}[]",
+            value: v,
+            data: {"ruby-ui--toggle-group-target": "input"}
+          )
+        end
+      end
+    end
+
+    def default_attrs
+      {
+        role: (@type == :single) ? "radiogroup" : "group",
+        data: {
+          controller: "ruby-ui--toggle-group",
+          "ruby-ui--toggle-group-type-value": @type.to_s,
+          "ruby-ui--toggle-group-name-value": @name.to_s,
+          orientation: @orientation.to_s,
+          spacing: @spacing.to_s
+        },
+        class: container_classes
+      }
+    end
+
+    def container_classes
+      base = if @orientation == :vertical
+        "flex w-fit flex-col items-stretch rounded-md"
+      else
+        "flex w-fit items-center rounded-md"
+      end
+
+      [
+        base,
+        SPACING_GAP[@spacing],
+        (@spacing == 0 && @variant == :outline) ? "shadow-xs" : nil
+      ].compact
+    end
+  end
+end

data/lib/ruby_ui/toggle_group/toggle_group_controller.js

@@ -0,0 +1,126 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="ruby-ui--toggle-group"
+export default class extends Controller {
+  static targets = ["item", "input"]
+  static values = { type: String, name: String }
+
+  connect() {
+    this.reconcile()
+  }
+
+  select(event) {
+    const item = event.currentTarget
+    if (item.disabled) return
+
+    if (this.typeValue === "single") {
+      this.itemTargets.forEach(el => this.setPressed(el, el === item))
+    } else {
+      this.setPressed(item, !this.isPressed(item))
+    }
+
+    this.rebuildInputs()
+    this.updateRovingTabindex(item)
+  }
+
+  navigate(event) {
+    if (this.typeValue !== "single") return
+    const items = this.enabledItems()
+    if (items.length === 0) return
+
+    const isRtl = document.documentElement.dir === "rtl"
+    const currentIndex = items.indexOf(event.currentTarget)
+    let nextIndex = currentIndex
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        nextIndex = (currentIndex + (isRtl && event.key === "ArrowRight" ? -1 : 1) + items.length) % items.length
+        break
+      case "ArrowLeft":
+      case "ArrowUp":
+        nextIndex = (currentIndex + (isRtl && event.key === "ArrowLeft" ? 1 : -1) + items.length) % items.length
+        break
+      case "Home":
+        nextIndex = 0
+        break
+      case "End":
+        nextIndex = items.length - 1
+        break
+      case " ":
+      case "Enter":
+        event.preventDefault()
+        event.currentTarget.click()
+        return
+      default:
+        return
+    }
+
+    event.preventDefault()
+    const next = items[nextIndex]
+    this.updateRovingTabindex(next)
+    next.focus()
+  }
+
+  reconcile() {
+    if (this.typeValue === "single") {
+      const pressed = this.itemTargets.find(el => this.isPressed(el))
+      const first = pressed || this.enabledItems()[0]
+      this.itemTargets.forEach(el => {
+        el.setAttribute("tabindex", el === first ? "0" : "-1")
+      })
+    } else {
+      this.itemTargets.forEach(el => el.setAttribute("tabindex", "0"))
+    }
+    this.rebuildInputs()
+  }
+
+  isPressed(item) {
+    return item.dataset.state === "on"
+  }
+
+  setPressed(item, pressed) {
+    item.dataset.state = pressed ? "on" : "off"
+    if (this.typeValue === "single") {
+      item.setAttribute("aria-checked", pressed ? "true" : "false")
+    } else {
+      item.setAttribute("aria-pressed", pressed ? "true" : "false")
+    }
+  }
+
+  updateRovingTabindex(focusedItem) {
+    if (this.typeValue !== "single") return
+    this.itemTargets.forEach(el => {
+      el.setAttribute("tabindex", el === focusedItem ? "0" : "-1")
+    })
+  }
+
+  enabledItems() {
+    return this.itemTargets.filter(el => !el.disabled)
+  }
+
+  rebuildInputs() {
+    if (!this.nameValue) return
+    this.inputTargets.forEach(el => el.remove())
+
+    const pressed = this.itemTargets.filter(el => this.isPressed(el))
+
+    if (this.typeValue === "single") {
+      const val = pressed[0]?.dataset.value || ""
+      this.element.appendChild(this.buildInput(this.nameValue, val))
+    } else {
+      pressed.forEach(item => {
+        this.element.appendChild(this.buildInput(`${this.nameValue}[]`, item.dataset.value))
+      })
+    }
+  }
+
+  buildInput(name, value) {
+    const input = document.createElement("input")
+    input.type = "hidden"
+    input.name = name
+    input.value = value
+    input.setAttribute("data-ruby-ui--toggle-group-target", "input")
+    return input
+  }
+}

data/lib/ruby_ui/toggle_group/toggle_group_item.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ToggleGroupItem < Toggle
+    JOIN_BASE = "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10"
+
+    def initialize(value:, group_context:, variant: nil, size: nil, **attrs)
+      @item_value = value.to_s
+      @group_context = group_context
+
+      pressed = group_context[:selected_values].include?(@item_value)
+      super(
+        pressed: pressed,
+        name: nil,
+        value: @item_value,
+        variant: variant || group_context[:variant],
+        size: size || group_context[:size],
+        disabled: group_context[:disabled],
+        **attrs
+      )
+    end
+
+    def view_template(&block)
+      button(**attrs, &block)
+    end
+
+    private
+
+    def default_attrs
+      attrs = {type: "button"}
+      attrs[:disabled] = true if @disabled
+      attrs[:data] = {
+        state: @pressed ? "on" : "off",
+        value: @item_value,
+        "ruby-ui--toggle-group-target": "item",
+        action: "click->ruby-ui--toggle-group#select keydown->ruby-ui--toggle-group#navigate"
+      }
+      attrs[:class] = [Toggle.classes_for(variant: @variant, size: @size), join_classes]
+
+      if @group_context[:type] == :single
+        attrs[:role] = "radio"
+        attrs[:aria] = {checked: @pressed.to_s}
+        attrs[:tabindex] = @pressed ? "0" : "-1"
+      else
+        attrs[:aria] = {pressed: @pressed.to_s}
+        attrs[:tabindex] = "0"
+      end
+
+      attrs
+    end
+
+    def join_classes
+      classes = [JOIN_BASE]
+      return classes unless @group_context[:spacing] == 0
+
+      classes << "rounded-none shadow-none"
+      if @group_context[:orientation] == :vertical
+        classes << "first-of-type:rounded-t-md last-of-type:rounded-b-md"
+        classes << "border-t-0 first-of-type:border-t" if @group_context[:variant] == :outline
+      else
+        classes << "first-of-type:rounded-l-md last-of-type:rounded-r-md"
+        classes << "border-l-0 first-of-type:border-l" if @group_context[:variant] == :outline
+      end
+      classes
+    end
+  end
+end

data/lib/ruby_ui/tooltip/tooltip_content.rb

@@ -8,7 +8,9 @@ module RubyUI
     end
 
     def view_template(&)
-      div(**attrs, &)
+      template(data: {ruby_ui__tooltip_target: "content"}) do
+        div(**attrs, &)
+      end
     end
 
     private
@@ -16,10 +18,15 @@ module RubyUI
     def default_attrs
       {
         id: @id,
-        data: {
-          ruby_ui__tooltip_target: "content"
-        },
-        class: "invisible peer-hover:visible peer-focus:visible w-max absolute top-0 left-0 z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md peer-focus:zoom-in-95 animate-out fade-out-0 zoom-out-95 peer-hover:animate-in peer-focus:animate-in peer-hover:fade-in-0 peer-focus:fade-in-0 peer-hover:zoom-in-95 group-data-[ruby-ui--tooltip-placement-value=bottom]:slide-in-from-top-2 group-data-[ruby-ui--tooltip-placement-value=left]:slide-in-from-right-2 group-data-[ruby-ui--tooltip-placement-value=right]:slide-in-from-left-2 group-data-[ruby-ui--tooltip-placement-value=top]:slide-in-from-bottom-2 delay-500"
+        class: [
+          "invisible pointer-events-none w-fit max-w-[calc(100vw-2rem)] text-balance break-words absolute top-0 left-0 z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+          "data-[placement=bottom]:slide-in-from-top-2",
+          "data-[placement=left]:slide-in-from-right-2",
+          "data-[placement=right]:slide-in-from-left-2",
+          "data-[placement=top]:slide-in-from-bottom-2",
+          "data-[state=open]:visible data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:visible data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:fill-mode-forwards"
+        ]
       }
     end
   end

data/lib/ruby_ui/tooltip/tooltip_controller.js

@@ -3,36 +3,72 @@ import { computePosition, autoUpdate, offset, shift } from "@floating-ui/dom";
 
 export default class extends Controller {
   static targets = ["trigger", "content"];
-  static values = { placement: String }
 
-  constructor(...args) {
-    super(...args);
-    this.cleanup;
+  static values = { placement: "top" };
+
+  mount() {
+    if (this.mounted) return;
+
+    const element = this.cloneTemplate();
+    element.setAttribute("data-placement", this.placementValue);
+    document.body.appendChild(element);
+
+    this.triggerTarget.setAttribute("aria-describedby", element.id);
+    element.addEventListener("animationend", (event) => this.animationEnd(event));
+
+    const onBeforeCache = () => this.unmount();
+    document.addEventListener("turbo:before-cache", onBeforeCache);
+
+    this.mounted = { element, onBeforeCache };
+    this.mounted.stopAutoUpdate = autoUpdate(this.triggerTarget, element, () => this.reposition());
   }
 
-  connect() {
-    this.setFloatingElement();
+  unmount() {
+    if (!this.mounted) return;
 
-    const tooltipId = this.contentTarget.getAttribute("id");
-    this.triggerTarget.setAttribute("aria-describedby", tooltipId);
+    document.removeEventListener("turbo:before-cache", this.mounted.onBeforeCache);
 
+    this.mounted.stopAutoUpdate?.();
+    this.mounted.element.remove();
+    this.triggerTarget.removeAttribute("aria-describedby");
+
+    this.mounted = null;
   }
 
   disconnect() {
-    this.cleanup();
-  }
-
-  setFloatingElement() {
-    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
-      computePosition(this.triggerTarget, this.contentTarget, {
-        placement: this.placementValue,
-        middleware: [offset(4), shift()]
-      }).then(({ x, y }) => {
-        Object.assign(this.contentTarget.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-        });
-      });
+    this.unmount();
+  }
+
+  show() {
+    if (!this.hasContentTarget) return;
+
+    this.mount();
+    this.mounted.element.setAttribute("data-state", "open");
+  }
+
+  hide() {
+    this.mounted?.element.setAttribute("data-state", "closed");
+  }
+
+  animationEnd(event) {
+    if (event.animationName !== "exit") return;
+    if (this.mounted?.element.getAttribute("data-state") !== "closed") return;
+
+    this.unmount();
+  }
+
+  cloneTemplate() {
+    return this.contentTarget.content.firstElementChild.cloneNode(true);
+  }
+
+  reposition() {
+    if (!this.mounted) return;
+
+    const position = { placement: this.placementValue, middleware: [offset(4), shift()] };
+
+    computePosition(this.triggerTarget, this.mounted.element, position).then(({ x, y }) => {
+      this.mounted?.element.style.setProperty("left", `${x}px`);
+      this.mounted?.element.style.setProperty("top", `${y}px`);
     });
   }
 }

data/lib/ruby_ui/tooltip/tooltip_docs.rb

@@ -24,6 +24,19 @@ class Views::Docs::Tooltip < Views::Base
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "Long content", context: self) do
+        <<~RUBY
+          Tooltip do
+            TooltipTrigger do
+              Button(variant: :outline) { "Hover me" }
+            end
+            TooltipContent do
+              Text { "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }
+            end
+          end
+        RUBY
+      end
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))

data/lib/ruby_ui/tooltip/tooltip_trigger.rb

@@ -10,9 +10,16 @@ module RubyUI
 
     def default_attrs
       {
-        data: {ruby_ui__tooltip_target: "trigger"},
-        variant: :outline,
-        class: "peer"
+        data: {
+          ruby_ui__tooltip_target: "trigger",
+          action: [
+            "mouseenter->ruby-ui--tooltip#show",
+            "mouseleave->ruby-ui--tooltip#hide",
+            "focus->ruby-ui--tooltip#show",
+            "blur->ruby-ui--tooltip#hide"
+          ]
+        },
+        variant: :outline
       }
     end
   end

data/lib/ruby_ui.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "date"
+
 module RubyUI
-  VERSION = "1.2.0"
+  VERSION = "1.3.0"
 end

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: ruby_ui
 version: !ruby/object:Gem::Version
-  version: 1.2.0
+  version: 1.3.0
 platform: ruby
 authors:
 - George Kettle
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-04-29 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -36,28 +35,28 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.2.0
+        version: 5.0.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.2.0
+        version: 5.0.0
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.12'
+        version: '1.4'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.12'
+        version: '1.4'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -92,14 +91,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '5.0'
+        version: '6.0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '5.0'
+        version: '6.0'
 description: Ruby UI is a UI Component Library for Ruby developers. Built on top of
   the Phlex Framework.
 email: george.kettle@icloud.com
@@ -145,6 +144,7 @@ files:
 - lib/ruby_ui/aspect_ratio/aspect_ratio.rb
 - lib/ruby_ui/aspect_ratio/aspect_ratio_docs.rb
 - lib/ruby_ui/avatar/avatar.rb
+- lib/ruby_ui/avatar/avatar_controller.js
 - lib/ruby_ui/avatar/avatar_docs.rb
 - lib/ruby_ui/avatar/avatar_fallback.rb
 - lib/ruby_ui/avatar/avatar_image.rb
@@ -228,6 +228,7 @@ files:
 - lib/ruby_ui/command/command_controller.js
 - lib/ruby_ui/command/command_dialog.rb
 - lib/ruby_ui/command/command_dialog_content.rb
+- lib/ruby_ui/command/command_dialog_controller.js
 - lib/ruby_ui/command/command_dialog_trigger.rb
 - lib/ruby_ui/command/command_docs.rb
 - lib/ruby_ui/command/command_empty.rb
@@ -264,6 +265,8 @@ files:
 - lib/ruby_ui/data_table/data_table_selection_summary.rb
 - lib/ruby_ui/data_table/data_table_sort_head.rb
 - lib/ruby_ui/data_table/data_table_toolbar.rb
+- lib/ruby_ui/date_picker/date_picker.rb
+- lib/ruby_ui/date_picker/date_picker_docs.rb
 - lib/ruby_ui/dialog/dialog.rb
 - lib/ruby_ui/dialog/dialog_content.rb
 - lib/ruby_ui/dialog/dialog_controller.js
@@ -401,11 +404,26 @@ files:
 - lib/ruby_ui/tabs/tabs_trigger.rb
 - lib/ruby_ui/textarea/textarea.rb
 - lib/ruby_ui/textarea/textarea_docs.rb
-- lib/ruby_ui/theme_toggle/set_dark_mode.rb
-- lib/ruby_ui/theme_toggle/set_light_mode.rb
 - lib/ruby_ui/theme_toggle/theme_toggle.rb
 - lib/ruby_ui/theme_toggle/theme_toggle_controller.js
 - lib/ruby_ui/theme_toggle/theme_toggle_docs.rb
+- lib/ruby_ui/toast/toast.rb
+- lib/ruby_ui/toast/toast_action.rb
+- lib/ruby_ui/toast/toast_cancel.rb
+- lib/ruby_ui/toast/toast_close.rb
+- lib/ruby_ui/toast/toast_controller.js
+- lib/ruby_ui/toast/toast_description.rb
+- lib/ruby_ui/toast/toast_docs.rb
+- lib/ruby_ui/toast/toast_icon.rb
+- lib/ruby_ui/toast/toast_item.rb
+- lib/ruby_ui/toast/toast_region.rb
+- lib/ruby_ui/toast/toast_title.rb
+- lib/ruby_ui/toast/toaster_controller.js
+- lib/ruby_ui/toggle/toggle.rb
+- lib/ruby_ui/toggle/toggle_controller.js
+- lib/ruby_ui/toggle_group/toggle_group.rb
+- lib/ruby_ui/toggle_group/toggle_group_controller.js
+- lib/ruby_ui/toggle_group/toggle_group_item.rb
 - lib/ruby_ui/tooltip/tooltip.rb
 - lib/ruby_ui/tooltip/tooltip_content.rb
 - lib/ruby_ui/tooltip/tooltip_controller.js
@@ -421,7 +439,6 @@ homepage: https://rubygems.org/gems/ruby_ui
 licenses:
 - MIT
 metadata: {}
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -436,8 +453,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.22
-signing_key:
+rubygems_version: 4.0.10
 specification_version: 4
 summary: RubyUI is a UI Component Library for Ruby developers.
 test_files: []

data/lib/ruby_ui/theme_toggle/set_dark_mode.rb

@@ -1,16 +0,0 @@
-# frozen_string_literal: true
-
-module RubyUI
-  class SetDarkMode < Base
-    def view_template(&)
-      div(**attrs, &)
-    end
-
-    def default_attrs
-      {
-        class: "hidden dark:inline-block",
-        data: {controller: "ruby-ui--theme-toggle", action: "click->ruby-ui--theme-toggle#setLightTheme"}
-      }
-    end
-  end
-end