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

data/lib/{rbui → ruby_ui}/sheet/sheet_header.rb

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

data/lib/{rbui → ruby_ui}/sheet/sheet_middle.rb

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

data/lib/{rbui → ruby_ui}/sheet/sheet_title.rb

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

data/lib/{rbui → ruby_ui}/sheet/sheet_trigger.rb

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

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

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

data/lib/ruby_ui/skeleton/skeleton.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Skeleton < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "animate-pulse rounded-md bg-primary/10"
+      }
+    end
+  end
+end

data/lib/ruby_ui/switch/switch.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Switch < Base
+    def initialize(include_hidden: true, checked_value: "1", unchecked_value: "0", **attrs)
+      @include_hidden = include_hidden
+      @checked_value = checked_value
+      @unchecked_value = unchecked_value
+      super(**attrs)
+    end
+
+    def view_template
+      label(
+        role: "switch",
+        class: "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 bg-input has-[:checked]:bg-primary"
+      ) do
+        input(type: "hidden", name: attrs[:name], value: @unchecked_value) if @include_hidden
+        input(**attrs.merge(type: "checkbox", class: "hidden peer", value: @checked_value))
+
+        span(class: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform translate-x-0 peer-checked:translate-x-5 ")
+      end
+    end
+  end
+end

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Table < Base
     def view_template(&block)
       div(class: "relative w-full overflow-auto") do

data/lib/{rbui → ruby_ui}/table/table_body.rb

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

data/lib/{rbui → ruby_ui}/table/table_caption.rb

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

data/lib/{rbui → ruby_ui}/table/table_cell.rb

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

data/lib/{rbui → ruby_ui}/table/table_footer.rb

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

data/lib/{rbui → ruby_ui}/table/table_head.rb

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

data/lib/{rbui → ruby_ui}/table/table_header.rb

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

data/lib/{rbui → ruby_ui}/table/table_row.rb

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

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Tabs < Base
     def initialize(default: nil, **attrs)
       @default = default
@@ -16,8 +16,8 @@ module RBUI
     def default_attrs
       {
         data: {
-          controller: "rbui--tabs",
-          rbui__tabs_active_value: @default
+          controller: "ruby-ui--tabs",
+          ruby_ui__tabs_active_value: @default
         }
       }
     end

data/lib/{rbui → ruby_ui}/tabs/tabs_content.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class TabsContent < Base
     def initialize(value:, **attrs)
       @value = value
@@ -16,7 +16,7 @@ module RBUI
     def default_attrs
       {
         data: {
-          rbui__tabs_target: :content,
+          ruby_ui__tabs_target: :content,
           value: @value
         },
         class: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hidden"

data/lib/ruby_ui/tabs/tabs_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="ruby-ui--tabs"
+export default class extends Controller {
+  static targets = ["trigger", "content"];
+  static values = { active: String };
+
+  connect() {
+    if (!this.hasActiveValue && this.triggerTargets.length > 0) {
+      this.activeValue = this.triggerTargets[0].dataset.value;
+    }
+  }
+
+  show(e) {
+    this.activeValue = e.currentTarget.dataset.value;
+  }
+
+  activeValueChanged(currentValue, previousValue) {
+    if (currentValue == "" || currentValue == previousValue) return;
+
+    this.contentTargets.forEach((el) => {
+      el.classList.add("hidden");
+    });
+
+    this.triggerTargets.forEach((el) => {
+      el.dataset.state = "inactive";
+    });
+
+    this.activeContentTarget() &&
+      this.activeContentTarget().classList.remove("hidden");
+    this.activeTriggerTarget().dataset.state = "active";
+  }
+
+  activeTriggerTarget() {
+    return this.triggerTargets.find(
+      (el) => el.dataset.value == this.activeValue,
+    );
+  }
+
+  activeContentTarget() {
+    return this.contentTargets.find(
+      (el) => el.dataset.value == this.activeValue,
+    );
+  }
+}

data/lib/{rbui → ruby_ui}/tabs/tabs_list.rb

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

data/lib/{rbui → ruby_ui}/tabs/tabs_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class TabsTrigger < Base
     def initialize(value:, **attrs)
       @value = value
@@ -17,8 +17,8 @@ module RBUI
       {
         type: :button,
         data: {
-          rbui__tabs_target: "trigger",
-          action: "click->rbui--tabs#show",
+          ruby_ui__tabs_target: "trigger",
+          action: "click->ruby-ui--tabs#show",
           value: @value
         },
         class: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow"

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Textarea < Base
     def initialize(rows: 4, **attrs)
       @rows = rows
@@ -16,8 +16,8 @@ module RBUI
     def default_attrs
       {
         data: {
-          rbui__form_field_target: "input",
-          action: "input->rbui--form-field#onInput invalid->rbui--form-field#onInvalid"
+          ruby_ui__form_field_target: "input",
+          action: "input->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
         },
         class: "flex w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 border-border focus-visible:ring-ring placeholder:text-muted-foreground"
       }

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class ThemeToggle < Base
     def view_template(&)
       div(**attrs, &)
@@ -20,21 +20,21 @@ module RBUI
 
     def default_attrs
       {
-        data: {controller: "rbui--theme-toggle"}
+        data: {controller: "ruby-ui--theme-toggle"}
       }
     end
 
     def default_light_attrs
       {
         class: "dark:hidden",
-        data: {action: "click->rbui--theme-toggle#setDarkTheme"}
+        data: {action: "click->ruby-ui--theme-toggle#setDarkTheme"}
       }
     end
 
     def default_dark_attrs
       {
         class: "hidden dark:inline-block",
-        data: {action: "click->rbui--theme-toggle#setLightTheme"}
+        data: {action: "click->ruby-ui--theme-toggle#setLightTheme"}
       }
     end
   end

data/lib/ruby_ui/theme_toggle/theme_toggle_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  initialize() {
+    this.setTheme()
+  }
+
+  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')
+    }
+  }
+
+  setLightTheme() {
+    // Whenever the user explicitly chooses light mode
+    localStorage.theme = 'light'
+    this.setTheme()
+  }
+
+  setDarkTheme() {
+    // Whenever the user explicitly chooses dark mode
+    localStorage.theme = 'dark'
+    this.setTheme()
+  }
+}

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Tooltip < Base
     def initialize(placement: "top", **attrs)
       @placement = placement
@@ -16,8 +16,8 @@ module RBUI
     def default_attrs
       {
         data: {
-          controller: "rbui--tooltip",
-          rbui__tooltip_placement_value: @placement
+          controller: "ruby-ui--tooltip",
+          ruby_ui__tooltip_placement_value: @placement
         },
         class: "group"
       }

data/lib/{rbui → ruby_ui}/tooltip/tooltip_content.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class TooltipContent < Base
     def initialize(**attrs)
       @id = "tooltip#{SecureRandom.hex(4)}"
@@ -17,9 +17,9 @@ module RBUI
       {
         id: @id,
         data: {
-          rbui__tooltip_target: "content"
+          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-[rbui--tooltip-placement-value=bottom]:slide-in-from-top-2 group-data-[rbui--tooltip-placement-value=left]:slide-in-from-right-2 group-data-[rbui--tooltip-placement-value=right]:slide-in-from-left-2 group-data-[rbui--tooltip-placement-value=top]:slide-in-from-bottom-2 delay-500"
+        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"
       }
     end
   end

data/lib/ruby_ui/tooltip/tooltip_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus";
+import { computePosition, autoUpdate, offset } from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["trigger", "content"];
+  static values = { placement: String }
+
+  constructor(...args) {
+    super(...args);
+    this.cleanup;
+  }
+
+  connect() {
+    this.setFloatingElement();
+
+    const tooltipId = this.contentTarget.getAttribute("id");
+    this.triggerTarget.setAttribute("aria-describedby", tooltipId);
+
+  }
+
+  disconnect() {
+    this.cleanup();
+  }
+
+  setFloatingElement() {
+    console.log(this.placementValue);
+
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, { placement: this.placementValue, middleware: [offset(4)] }).then(({ x, y }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
+}

data/lib/{rbui → ruby_ui}/tooltip/tooltip_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class TooltipTrigger < Base
     def view_template(&)
       div(**attrs, &)
@@ -10,7 +10,7 @@ module RBUI
 
     def default_attrs
       {
-        data: {rbui__tooltip_target: "trigger"},
+        data: {ruby_ui__tooltip_target: "trigger"},
         variant: :outline,
         class: "peer"
       }

data/lib/ruby_ui/typography/heading.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Heading < Base
+    def initialize(level: nil, as: nil, size: nil, **attrs)
+      @level = level
+      @as = as
+      @size = size
+      super(**attrs)
+    end
+
+    def view_template(&)
+      tag = determine_tag
+      public_send(tag, **attrs, &)
+    end
+
+    private
+
+    def determine_tag
+      return @as if @as
+      return "h#{@level}" if @level
+      "h1"
+    end
+
+    def default_attrs
+      {
+        class: class_names
+      }
+    end
+
+    def class_names
+      base_classes = "scroll-m-20 font-bold tracking-tight"
+      size_class = size_to_class[(@size || level_to_size[@level&.to_s] || "6").to_s]
+      "#{base_classes} #{size_class}"
+    end
+
+    def size_to_class
+      {
+        "1" => "text-xs",
+        "2" => "text-sm",
+        "3" => "text-base",
+        "4" => "text-lg",
+        "5" => "text-xl",
+        "6" => "text-2xl",
+        "7" => "text-3xl lg:text-4xl",
+        "8" => "text-4xl",
+        "9" => "text-5xl"
+      }
+    end
+
+    def level_to_size
+      {
+        "1" => "7",
+        "2" => "6",
+        "3" => "5",
+        "4" => "4"
+      }
+    end
+  end
+end

data/lib/{rbui/typography/typography_inline_code.rb → ruby_ui/typography/inline_code.rb}

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
-module RBUI
-  class TypographyInlineCode < Base
+module RubyUI
+  class InlineCode < Base
     def view_template(&)
       code(**attrs, &)
     end

data/lib/{rbui/typography/typography_inline_link.rb → ruby_ui/typography/inline_link.rb}

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
-module RBUI
-  class TypographyInlineLink < Base
+module RubyUI
+  class InlineLink < Base
     def initialize(href:, **attrs)
       super(**attrs)
       @href = href

data/lib/ruby_ui/typography/text.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Text < Base
+    def initialize(as: "p", size: "3", weight: "regular", **attrs)
+      @as = as
+      @size = size
+      @weight = weight
+      super(**attrs)
+    end
+
+    def view_template(&)
+      public_send(@as, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: class_names
+      }
+    end
+
+    def class_names
+      "#{size_to_class[@size]} #{weight_to_class[@weight]}"
+    end
+
+    def size_to_class
+      {
+        "1" => "text-xs", "xs" => "text-xs",
+        "2" => "text-sm", "sm" => "text-sm",
+        "3" => "text-base", "base" => "text-base",
+        "4" => "text-lg", "lg" => "text-lg",
+        "5" => "text-xl", "xl" => "text-xl",
+        "6" => "text-2xl", "2xl" => "text-2xl",
+        "7" => "text-3xl", "3xl" => "text-3xl",
+        "8" => "text-4xl", "4xl" => "text-4xl",
+        "9" => "text-5xl", "5xl" => "text-5xl"
+      }
+    end
+
+    def weight_to_class
+      {
+        "muted" => "text-muted-foreground",
+        "light" => "font-light",
+        "regular" => "font-normal",
+        "medium" => "font-medium",
+        "semibold" => "font-semibold",
+        "bold" => "font-bold"
+      }
+    end
+  end
+end

data/lib/{rbui → ruby_ui}/typography/typography_blockquote.rb

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

data/lib/ruby_ui.rb

@@ -1 +1,5 @@
-require_relative "rbui"
+# frozen_string_literal: true
+
+module RubyUI
+  VERSION = "1.0.0.rc1"
+end