ruby_ui 1.0.0.pre.alpha.4 → 1.0.0.rc1

data/lib/ruby_ui/accordion/accordion_controller.js

@@ -0,0 +1,97 @@
+import { Controller } from "@hotwired/stimulus";
+import { animate } from "motion";
+
+// Connects to data-controller="ruby-ui--accordion"
+export default class extends Controller {
+  static targets = ["icon", "content"];
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    animationDuration: {
+      type: Number,
+      default: 0.15, // Default animation duration (in seconds)
+    },
+    animationEasing: {
+      type: String,
+      default: "ease-in-out", // Default animation easing
+    },
+    rotateIcon: {
+      type: Number,
+      default: 180, // Default icon rotation (in degrees)
+    },
+  };
+
+  connect() {
+    // Set the initial state of the accordion
+    let originalAnimationDuration = this.animationDurationValue;
+    this.animationDurationValue = 0;
+    this.openValue ? this.open() : this.close();
+    this.animationDurationValue = originalAnimationDuration;
+  }
+
+  // Toggle the 'open' value
+  toggle() {
+    this.openValue = !this.openValue;
+  }
+
+  // Handle changes in the 'open' value
+  openValueChanged(isOpen, wasOpen) {
+    if (isOpen) {
+      this.open();
+    } else {
+      this.close();
+    }
+  }
+
+  // Open the accordion content
+  open() {
+    if (this.hasContentTarget) {
+      this.revealContent();
+      this.hasIconTarget && this.rotateIcon();
+      this.openValue = true;
+    }
+  }
+
+  // Close the accordion content
+  close() {
+    if (this.hasContentTarget) {
+      this.hideContent();
+      this.hasIconTarget && this.rotateIcon();
+      this.openValue = false;
+    }
+  }
+
+  // Reveal the accordion content with animation
+  revealContent() {
+    const contentHeight = this.contentTarget.scrollHeight;
+    animate(
+      this.contentTarget,
+      { height: `${contentHeight}px` },
+      {
+        duration: this.animationDurationValue,
+        easing: this.animationEasingValue,
+      },
+    );
+  }
+
+  // Hide the accordion content with animation
+  hideContent() {
+    animate(
+      this.contentTarget,
+      { height: 0 },
+      {
+        duration: this.animationDurationValue,
+        easing: this.animationEasingValue,
+      },
+    );
+  }
+
+  // Rotate the accordion icon 180deg using animate function
+  rotateIcon() {
+    animate(this.iconTarget, {
+      rotate: `${this.openValue ? this.rotateIconValue : 0}deg`,
+    });
+  }
+}

data/lib/{rbui → ruby_ui}/accordion/accordion_default_content.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AccordionDefaultContent < Base
     def view_template(&)
       div(**attrs, &)

data/lib/{rbui → ruby_ui}/accordion/accordion_default_trigger.rb

@@ -1,17 +1,17 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AccordionDefaultTrigger < Base
     def view_template(&block)
       div(class: "flex items-center justify-between w-full") do
         p(&block)
-        RBUI.AccordionIcon
+        RubyUI.AccordionIcon
       end
     end
 
     def default_attrs
       {
-        data: {action: "click->rbui--accordion#toggle"},
+        data: {action: "click->ruby-ui--accordion#toggle"},
         class: "w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline"
       }
     end

data/lib/{rbui → ruby_ui}/accordion/accordion_icon.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AccordionIcon < Base
     def view_template(&block)
       span(**attrs) do
@@ -31,7 +31,7 @@ module RBUI
     def default_attrs
       {
         class: "opacity-50",
-        data: {rbui__accordion_target: "icon"}
+        data: {ruby_ui__accordion_target: "icon"}
       }
     end
   end

data/lib/{rbui → ruby_ui}/accordion/accordion_item.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AccordionItem < Base
     def initialize(open: false, rotate_icon: 180, **attrs)
       @open = open
@@ -17,9 +17,9 @@ module RBUI
     def default_attrs
       {
         data: {
-          controller: "rbui--accordion",
-          rbui__accordion_open_value: @open,
-          rbui__accordion_rotate_icon_value: @rotate_icon
+          controller: "ruby-ui--accordion",
+          ruby_ui__accordion_open_value: @open,
+          ruby_ui__accordion_rotate_icon_value: @rotate_icon
         },
         class: "border-b"
       }

data/lib/{rbui → ruby_ui}/accordion/accordion_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AccordionTrigger < Base
     def view_template(&)
       button(**attrs, &)
@@ -8,7 +8,8 @@ module RBUI
 
     def default_attrs
       {
-        data: {action: "click->rbui--accordion#toggle"},
+        type: "button",
+        data: {action: "click->ruby-ui--accordion#toggle"},
         class: "w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline"
       }
     end

data/lib/{rbui → ruby_ui}/alert/alert.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Alert < Base
     def initialize(variant: nil, **attrs)
       @variant = variant
@@ -27,9 +27,9 @@ module RBUI
     end
 
     def default_attrs
-      base_classes = "backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8"
+      base_classes = "backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg~*]:ps-8"
       {
-        class: tokens(base_classes, colors)
+        class: [base_classes, colors]
       }
     end
   end

data/lib/{rbui → ruby_ui}/alert/alert_description.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AlertDescription < Base
     def view_template(&)
       div(**attrs, &)

data/lib/{rbui → ruby_ui}/alert/alert_title.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AlertTitle < Base
     def view_template(&)
       h5(**attrs, &)

data/lib/{rbui → ruby_ui}/alert_dialog/alert_dialog.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AlertDialog < Base
     def initialize(open: false, **attrs)
       @open = open
@@ -16,8 +16,8 @@ module RBUI
     def default_attrs
       {
         data: {
-          controller: "rbui--alert-dialog",
-          rbui__alert_dialog_open_value: @open.to_s
+          controller: "ruby-ui--alert-dialog",
+          ruby_ui__alert_dialog_open_value: @open.to_s
         },
         class: "inline-block"
       }

data/lib/{rbui → ruby_ui}/alert_dialog/alert_dialog_action.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AlertDialogAction < Base
     def view_template(&)
-      render RBUI::Button.new(**attrs, &)
+      render RubyUI::Button.new(**attrs, &)
     end
 
     private

data/lib/{rbui → ruby_ui}/alert_dialog/alert_dialog_cancel.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AlertDialogCancel < Base
     def view_template(&)
-      render RBUI::Button.new(**attrs, &)
+      render RubyUI::Button.new(**attrs, &)
     end
 
     private
@@ -12,7 +12,7 @@ module RBUI
       {
         variant: :outline,
         data: {
-          action: "click->rbui--alert-dialog#dismiss"
+          action: "click->ruby-ui--alert-dialog#dismiss"
         },
         class: "mt-2 sm:mt-0"
       }

data/lib/{rbui → ruby_ui}/alert_dialog/alert_dialog_content.rb

@@ -1,10 +1,10 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AlertDialogContent < Base
     def view_template(&block)
-      template_tag(**attrs) do
-        div(data: {controller: "rbui--alert-dialog"}) do
+      template(**attrs) do
+        div(data: {controller: "ruby-ui--alert-dialog"}) do
           background
           container(&block)
         end
@@ -26,7 +26,7 @@ module RBUI
       div(
         role: "alertdialog",
         data_state: "open",
-        class: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        class: "flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
         style: "pointer-events:auto",
         &
       )
@@ -37,7 +37,7 @@ module RBUI
     def default_attrs
       {
         data: {
-          rbui__alert_dialog_target: "content"
+          ruby_ui__alert_dialog_target: "content"
         }
       }
     end

data/lib/ruby_ui/alert_dialog/alert_dialog_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="ruby-ui--alert-dialog"
+export default class extends Controller {
+  static targets = ["content"];
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+  };
+
+  connect() {
+    if (this.openValue) {
+      this.open();
+    }
+  }
+
+  open() {
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
+    // prevent scroll on body
+    document.body.classList.add("overflow-hidden");
+  }
+
+  dismiss(e) {
+    // allow scroll on body
+    document.body.classList.remove("overflow-hidden");
+    // remove the element
+    this.element.remove();
+  }
+}

data/lib/{rbui → ruby_ui}/alert_dialog/alert_dialog_description.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AlertDialogDescription < Base
     def view_template(&)
       p(**attrs, &)

data/lib/{rbui → ruby_ui}/alert_dialog/alert_dialog_footer.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AlertDialogFooter < Base
     def view_template(&)
       div(**attrs, &)
@@ -10,7 +10,7 @@ module RBUI
 
     def default_attrs
       {
-        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
+        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 rtl:space-x-reverse"
       }
     end
   end

data/lib/{rbui → ruby_ui}/alert_dialog/alert_dialog_header.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AlertDialogHeader < Base
     def view_template(&)
       div(**attrs, &)
@@ -10,7 +10,7 @@ module RBUI
 
     def default_attrs
       {
-        class: "flex flex-col space-y-2 text-center sm:text-left"
+        class: "flex flex-col space-y-2 text-center sm:text-left rtl:sm:text-right"
       }
     end
   end

data/lib/{rbui → ruby_ui}/alert_dialog/alert_dialog_title.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AlertDialogTitle < Base
     def view_template(&)
       h2(**attrs, &)

data/lib/{rbui → ruby_ui}/alert_dialog/alert_dialog_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AlertDialogTrigger < Base
     def view_template(&)
       div(**attrs, &)
@@ -10,7 +10,7 @@ module RBUI
 
     def default_attrs
       {
-        data: {action: "click->rbui--alert-dialog#open"},
+        data: {action: "click->ruby-ui--alert-dialog#open"},
         class: "inline-block"
       }
     end

data/lib/{rbui → ruby_ui}/aspect_ratio/aspect_ratio.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AspectRatio < Base
     def initialize(aspect_ratio: "16/9", **attrs)
       raise "aspect_ratio must be in the format of a string with a slash in the middle (eg. '16/9', '1/1')" unless aspect_ratio.is_a?(String) && aspect_ratio.include?("/")

data/lib/{rbui → ruby_ui}/avatar/avatar.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Avatar < Base
     SIZES = {
       xs: "h-4 w-4 text-[0.5rem]",
@@ -24,7 +24,7 @@ module RBUI
 
     def default_attrs
       {
-        class: tokens("relative flex shrink-0 overflow-hidden rounded-full", @size_classes)
+        class: ["relative flex shrink-0 overflow-hidden rounded-full", @size_classes]
       }
     end
   end

data/lib/{rbui → ruby_ui}/avatar/avatar_fallback.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AvatarFallback < Base
     def view_template(&)
       span(**attrs, &)

data/lib/{rbui → ruby_ui}/avatar/avatar_image.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class AvatarImage < Base
     def initialize(src:, alt: "", **attrs)
       @src = src

data/lib/{rbui → ruby_ui}/badge/badge.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Badge < Base
     SIZES = {
       sm: "px-1.5 py-0.5 text-xs",
@@ -53,7 +53,7 @@ module RBUI
 
     def default_attrs
       {
-        class: tokens("inline-flex items-center rounded-md font-medium ring-1 ring-inset", SIZES[@size], COLORS[@variant])
+        class: ["inline-flex items-center rounded-md font-medium ring-1 ring-inset", SIZES[@size], COLORS[@variant]]
       }
     end
   end

data/lib/{rbui → ruby_ui}/base.rb

@@ -2,7 +2,7 @@
 
 require "tailwind_merge"
 
-module RBUI
+module RubyUI
   class Base < Phlex::HTML
     TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER)
 
@@ -13,13 +13,6 @@ module RBUI
       @attrs[:class] = TAILWIND_MERGER.merge(@attrs[:class]) if @attrs[:class]
     end
 
-    if defined?(Rails) && Rails.env.development?
-      def before_template
-        comment { "Before #{self.class.name}" }
-        super
-      end
-    end
-
     private
 
     def default_attrs

data/lib/ruby_ui/breadcrumb/breadcrumb.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Breadcrumb < Base
+    def view_template(&)
+      nav(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: {label: "breadcrumb"}
+      }
+    end
+  end
+end

data/lib/ruby_ui/breadcrumb/breadcrumb_ellipsis.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbEllipsis < Base
+    def view_template(&)
+      span(**attrs) do
+        icon
+        span(class: "sr-only") { "More" }
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "w-4 h-4",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.circle(cx: "12", cy: "12", r: "1")
+        s.circle(cx: "19", cy: "12", r: "1")
+        s.circle(cx: "5", cy: "12", r: "1")
+      end
+    end
+
+    def default_attrs
+      {
+        aria: {hidden: true},
+        class: "flex h-9 w-9 items-center justify-center",
+        role: "presentation"
+      }
+    end
+  end
+end

data/lib/{rbui/typography/typography_list_item.rb → ruby_ui/breadcrumb/breadcrumb_item.rb}

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
-module RBUI
-  class TypographyListItem < Base
+module RubyUI
+  class BreadcrumbItem < Base
     def view_template(&)
       li(**attrs, &)
     end
@@ -10,7 +10,7 @@ module RBUI
 
     def default_attrs
       {
-        class: "leading-7"
+        class: "inline-flex items-center gap-1.5"
       }
     end
   end

data/lib/ruby_ui/breadcrumb/breadcrumb_link.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbLink < Base
+    def initialize(href: "#", **attrs)
+      @href = href
+      super(**attrs)
+    end
+
+    def view_template(&)
+      a(href: @href, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "transition-colors hover:text-foreground"
+      }
+    end
+  end
+end

data/lib/ruby_ui/breadcrumb/breadcrumb_list.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbList < Base
+    def view_template(&)
+      ol(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5"
+      }
+    end
+  end
+end

data/lib/ruby_ui/breadcrumb/breadcrumb_page.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbPage < Base
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: {disabled: true, current: "page"},
+        class: "font-normal text-foreground",
+        role: "link"
+      }
+    end
+  end
+end

data/lib/ruby_ui/breadcrumb/breadcrumb_separator.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbSeparator < Base
+    def view_template(&block)
+      li(**attrs) do
+        if block
+          block.call
+        else
+          icon
+        end
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "w-4 h-4",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) { |s| s.path(d: "m9 18 6-6-6-6") }
+    end
+
+    def default_attrs
+      {
+        aria: {hidden: true},
+        class: "[&>svg]:w-3.5 [&>svg]:h-3.5",
+        role: "presentation"
+      }
+    end
+  end
+end