ruby_ui 1.0.0.pre.alpha.4

data/lib/rbui/alert_dialog/alert_dialog_content.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertDialogContent < Base
+    def view_template(&block)
+      template_tag(**attrs) do
+        div(data: {controller: "rbui--alert-dialog"}) do
+          background
+          container(&block)
+        end
+      end
+    end
+
+    def background
+      div(
+        data_state: "open",
+        class:
+              "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        style: "pointer-events:auto",
+        data_aria_hidden: "true",
+        aria_hidden: "true"
+      )
+    end
+
+    def container(&)
+      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",
+        style: "pointer-events:auto",
+        &
+      )
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          rbui__alert_dialog_target: "content"
+        }
+      }
+    end
+  end
+end

data/lib/rbui/alert_dialog/alert_dialog_description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertDialogDescription < Base
+    def view_template(&)
+      p(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm text-muted-foreground"
+      }
+    end
+  end
+end

data/lib/rbui/alert_dialog/alert_dialog_footer.rb

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

data/lib/rbui/alert_dialog/alert_dialog_header.rb

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

data/lib/rbui/alert_dialog/alert_dialog_title.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AlertDialogTitle < Base
+    def view_template(&)
+      h2(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-lg font-semibold"
+      }
+    end
+  end
+end

data/lib/rbui/alert_dialog/alert_dialog_trigger.rb

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

data/lib/rbui/aspect_ratio/aspect_ratio.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module RBUI
+  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?("/")
+
+      @aspect_ratio = aspect_ratio
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(
+        class: "relative w-full",
+        style: "padding-bottom: #{padding_bottom}%;"
+      ) do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def padding_bottom
+      @aspect_ratio.split("/").map(&:to_i).reverse.reduce(&:fdiv) * 100
+    end
+
+    def default_attrs
+      {
+        class: "bg-muted absolute inset-0 [&>img]:object-cover [&>img]:absolute [&>img]:h-full [&>img]:w-full [&>img]:inset-0 [&>img]:text-transparent"
+      }
+    end
+  end
+end

data/lib/rbui/avatar/avatar.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Avatar < Base
+    SIZES = {
+      xs: "h-4 w-4 text-[0.5rem]",
+      sm: "h-6 w-6 text-xs",
+      md: "h-10 w-10 text-base",
+      lg: "h-14 w-14 text-xl",
+      xl: "h-20 w-20 text-3xl"
+    }
+
+    def initialize(size: :md, **attrs)
+      @size = size
+      @size_classes = SIZES[@size]
+      super(**attrs)
+    end
+
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: tokens("relative flex shrink-0 overflow-hidden rounded-full", @size_classes)
+      }
+    end
+  end
+end

data/lib/rbui/avatar/avatar_fallback.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AvatarFallback < Base
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex h-full w-full items-center justify-center rounded-full bg-muted"
+      }
+    end
+  end
+end

data/lib/rbui/avatar/avatar_image.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RBUI
+  class AvatarImage < Base
+    def initialize(src:, alt: "", **attrs)
+      @src = src
+      @alt = alt
+      super(**attrs)
+    end
+
+    def view_template
+      img(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        loading: "lazy",
+        class: "aspect-square h-full w-full",
+        alt: @alt,
+        src: @src
+      }
+    end
+  end
+end

data/lib/rbui/badge/badge.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Badge < Base
+    SIZES = {
+      sm: "px-1.5 py-0.5 text-xs",
+      md: "px-2 py-1 text-xs",
+      lg: "px-3 py-1 text-sm"
+    }
+
+    COLORS = {
+      primary: "text-primary bg-primary/5 ring-primary/20",
+      secondary: "text-secondary bg-secondary/10 ring-secondary/20",
+      outline: "text-foreground bg-background ring-border",
+      destructive: "text-destructive bg-destructive/10 ring-destructive/20",
+      success: "text-success bg-success/10 ring-success/20",
+      warning: "text-warning bg-warning/10 ring-warning/20",
+      slate: "text-slate-500 bg-slate-500/10 ring-slate-500/20",
+      gray: "text-gray-500 bg-gray-500/10 ring-gray-500/20",
+      zinc: "text-zinc-500 bg-zinc-500/10 ring-zinc-500/20",
+      neutral: "text-neutral-500 bg-neutral-500/10 ring-neutral-500/20",
+      stone: "text-stone-500 bg-stone-500/10 ring-stone-500/20",
+      red: "text-red-500 bg-red-500/10 ring-red-500/20",
+      orange: "text-orange-500 bg-orange-500/10 ring-orange-500/20",
+      amber: "text-amber-500 bg-amber-500/10 ring-amber-500/20",
+      yellow: "text-yellow-500 bg-yellow-500/10 ring-yellow-500/20",
+      lime: "text-lime-500 bg-lime-500/10 ring-lime-500/20",
+      green: "text-green-500 bg-green-500/10 ring-green-500/20",
+      emerald: "text-emerald-500 bg-emerald-500/10 ring-emerald-500/20",
+      teal: "text-teal-500 bg-teal-500/10 ring-teal-500/20",
+      cyan: "text-cyan-500 bg-cyan-500/10 ring-cyan-500/20",
+      sky: "text-sky-500 bg-sky-500/10 ring-sky-500/20",
+      blue: "text-blue-500 bg-blue-500/10 ring-blue-500/20",
+      indigo: "text-indigo-500 bg-indigo-500/10 ring-indigo-500/20",
+      violet: "text-violet-500 bg-violet-500/10 ring-violet-500/20",
+      purple: "text-purple-500 bg-purple-500/10 ring-purple-500/20",
+      fuchsia: "text-fuchsia-500 bg-fuchsia-500/10 ring-fuchsia-500/20",
+      pink: "text-pink-500 bg-pink-500/10 ring-pink-500/20",
+      rose: "text-rose-500 bg-rose-500/10 ring-rose-500/20"
+    }
+
+    def initialize(variant: :primary, size: :md, **args)
+      @variant = variant
+      @size = size
+      super(**args)
+    end
+
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: tokens("inline-flex items-center rounded-md font-medium ring-1 ring-inset", SIZES[@size], COLORS[@variant])
+      }
+    end
+  end
+end

data/lib/rbui/base.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+module RBUI
+  class Base < Phlex::HTML
+    TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze unless defined?(TAILWIND_MERGER)
+
+    attr_reader :attrs
+
+    def initialize(**user_attrs)
+      @attrs = mix(default_attrs, user_attrs)
+      @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
+      {}
+    end
+  end
+end

data/lib/rbui/button/button.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Button < Base
+    def initialize(type: :button, variant: :primary, size: :md, icon: false, **attrs)
+      @type = type
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @icon = icon
+      super(**attrs)
+    end
+
+    def view_template(&)
+      button(**attrs, &)
+    end
+
+    private
+
+    def size_classes
+      if @icon
+        case @size
+        when :sm then "h-6 w-6"
+        when :md then "h-9 w-9"
+        when :lg then "h-10 w-10"
+        when :xl then "h-12 w-12"
+        end
+      else
+        case @size
+        when :sm then "px-3 py-1.5 h-8 text-xs"
+        when :md then "px-4 py-2 h-9 text-sm"
+        when :lg then "px-4 py-2 h-10 text-base"
+        when :xl then "px-6 py-3 h-12 text-base"
+        end
+      end
+    end
+
+    def primary_classes
+      tokens(
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        size_classes
+      )
+    end
+
+    def link_classes
+      tokens(
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline",
+        size_classes
+      )
+    end
+
+    def secondary_classes
+      tokens(
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-opacity-80",
+        size_classes
+      )
+    end
+
+    def destructive_classes
+      tokens(
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        size_classes
+      )
+    end
+
+    def outline_classes
+      tokens(
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        size_classes
+      )
+    end
+
+    def ghost_classes
+      tokens(
+        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground",
+        size_classes
+      )
+    end
+
+    def default_classes
+      case @variant
+      when :primary then primary_classes
+      when :link then link_classes
+      when :secondary then secondary_classes
+      when :destructive then destructive_classes
+      when :outline then outline_classes
+      when :ghost then ghost_classes
+      end
+    end
+
+    def default_attrs
+      {
+        type: @type,
+        class: default_classes
+      }
+    end
+  end
+end

data/lib/rbui/calendar/calendar.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Calendar < Base
+    def initialize(selected_date: nil, input_id: nil, date_format: "yyyy-MM-dd", **attrs)
+      @selected_date = selected_date
+      @input_id = input_id
+      @date_format = date_format
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        RBUI.CalendarHeader do
+          RBUI.CalendarTitle
+          RBUI.CalendarPrev
+          RBUI.CalendarNext
+        end
+        RBUI.CalendarBody # Where the calendar is rendered (Weekdays and Days)
+        RBUI.CalendarWeekdays # Template for the weekdays
+        RBUI.CalendarDays # Template for the days
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "p-3 space-y-4",
+        data: {
+          controller: "rbui--calendar",
+          rbui__calendar_selected_date_value: @selected_date&.to_s,
+          rbui__calendar_format_value: @date_format,
+          rbui__calendar_rbui__calendar_input_outlet: @input_id
+        }
+      }
+    end
+  end
+end

data/lib/rbui/calendar/calendar_body.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CalendarBody < Base
+    def view_template
+      table(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          rbui__calendar_target: "calendar"
+        }
+      }
+    end
+  end
+end

data/lib/rbui/calendar/calendar_days.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CalendarDays < Base
+    BASE_CLASS = "inline-flex items-center justify-center rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+
+    def view_template
+      render_selected_date_template
+      render_today_date_template
+      render_current_month_date_template
+      render_other_month_date_template
+    end
+
+    private
+
+    def render_selected_date_template
+      date_template("selectedDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          data_action: "click->rbui--calendar#selectDay",
+          name: "day",
+          class:
+                tokens(
+                  BASE_CLASS,
+                  "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground"
+                ),
+          role: "gridcell",
+          tabindex: "0",
+          type: "button",
+          aria_selected: "true"
+        ) { "{{dayDate}}" }
+      end
+    end
+
+    def render_today_date_template
+      date_template("todayDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          data_action: "click->rbui--calendar#selectDay",
+          name: "day",
+          class:
+                tokens(
+                  BASE_CLASS,
+                  "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                ),
+          role: "gridcell",
+          tabindex: "-1",
+          type: "button"
+        ) { "{{dayDate}}" }
+      end
+    end
+
+    def render_current_month_date_template
+      date_template("currentMonthDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          data_action: "click->rbui--calendar#selectDay",
+          name: "day",
+          class:
+                tokens(
+                  BASE_CLASS,
+                  "bg-background text-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                ),
+          role: "gridcell",
+          tabindex: "-1",
+          type: "button"
+        ) { "{{dayDate}}" }
+      end
+    end
+
+    def render_other_month_date_template
+      date_template("otherMonthDateTemplate") do
+        button(
+          data_day: "{{day}}",
+          data_action: " click->rbui--calendar#selectDay",
+          name: "day",
+          class:
+                tokens(
+                  BASE_CLASS,
+                  "bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                ),
+          role: "gridcell",
+          tabindex: "-1",
+          type: "button"
+        ) { "{{dayDate}}" }
+      end
+    end
+
+    def date_template(target, &block)
+      template_tag(data: {rbui__calendar_target: target}) do
+        td(
+          class:
+                "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected])]:rounded-md",
+          role: "presentation",
+          &block
+        )
+      end
+    end
+
+    def default_attrs
+      {}
+    end
+  end
+end

data/lib/rbui/calendar/calendar_header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CalendarHeader < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex justify-center pt-1 relative items-center"
+      }
+    end
+  end
+end

data/lib/rbui/calendar/calendar_next.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CalendarNext < Base
+    def view_template(&block)
+      button(**attrs) do
+        icon
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        width: "15",
+        height: "15",
+        viewbox: "0 0 15 15",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "h-4 w-4"
+      ) do |s|
+        s.path(
+          d:
+                "M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z",
+          fill: "currentColor",
+          fill_rule: "evenodd",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        name: "next-month",
+        aria_label: "Go to next month",
+        class:
+              "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input hover:bg-accent hover:text-accent-foreground h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1",
+        type: "button",
+        data_action: "click->rbui--calendar#nextMonth"
+      }
+    end
+  end
+end