ruby_ui 1.0.0 → 1.0.2

data/lib/ruby_ui/sidebar/sidebar_menu_action.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuAction < Base
+    def initialize(as: :button, show_on_hover: false, **attrs)
+      @as = as
+      super(**attrs)
+    end
+
+    def view_template(&)
+      tag(@as, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "absolute right-1 top-1.5 flex aspect-square w-5 items-center",
+          "justify-center rounded-md p-0 text-sidebar-foreground outline-none",
+          "ring-sidebar-ring transition-transform hover:bg-sidebar-accent",
+          "hover:text-sidebar-accent-foreground focus-visible:ring-2",
+          "peer-hover/menu-button:text-sidebar-accent-foreground",
+          "[&>svg]:size-4 [&>svg]:shrink-0",
+          "after:absolute after:-inset-2 after:md:hidden",
+          "peer-data-[size=sm]/menu-button:top-1",
+          "peer-data-[size=default]/menu-button:top-1.5",
+          "peer-data-[size=lg]/menu-button:top-2.5",
+          "group-data-[collapsible=icon]:hidden",
+          show_on_hover_classes
+        ],
+        data: {
+          sidebar: "menu-action"
+        }
+      }
+    end
+
+    def show_on_hover_classes
+      return unless @show_on_hover
+
+      [
+        "group-focus-within/menu-item:opacity-100",
+        "group-hover/menu-item:opacity-100 data-[state=open]:opacity-100",
+        "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0"
+      ].join(" ")
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu_badge.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuBadge < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none",
+          "items-center justify-center rounded-md px-1 text-xs font-medium",
+          "tabular-nums text-sidebar-foreground",
+          "peer-hover/menu-button:text-sidebar-accent-foreground",
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+          "peer-data-[size=sm]/menu-button:top-1",
+          "peer-data-[size=default]/menu-button:top-1.5",
+          "peer-data-[size=lg]/menu-button:top-2.5",
+          "group-data-[collapsible=icon]:hidden"
+        ],
+        data: {
+          sidebar: "menu-badge"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu_button.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuButton < Base
+    VARIANT_CLASSES = {
+      default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+      outline:
+        "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+    }.freeze
+
+    SIZE_CLASSES = {
+      default: "h-8 text-sm",
+      sm: "h-7 text-xs",
+      lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0"
+    }.freeze
+
+    def initialize(as: :button, variant: :default, size: :default, active: false, **attrs)
+      raise ArgumentError, "Invalid variant: #{variant}" unless VARIANT_CLASSES.key?(variant)
+      raise ArgumentError, "Invalid size: #{size}" unless SIZE_CLASSES.key?(size)
+
+      @as = as
+      @variant = variant
+      @size = size
+      @active = active
+      super(**attrs)
+    end
+
+    def view_template(&)
+      tag(@as, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "peer/menu-button flex w-full items-center gap-2 overflow-hidden",
+          "rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring",
+          "transition-[width,height,padding] hover:bg-sidebar-accent",
+          "hover:text-sidebar-accent-foreground focus-visible:ring-2",
+          "active:bg-sidebar-accent active:text-sidebar-accent-foreground",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "group-has-[[data-sidebar=menu-action]]/menu-item:pr-8",
+          "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+          "data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium",
+          "data-[active=true]:text-sidebar-accent-foreground",
+          "data-[state=open]:hover:bg-sidebar-accent",
+          "data-[state=open]:hover:text-sidebar-accent-foreground",
+          "group-data-[collapsible=icon]:!size-8",
+          "group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate",
+          "[&>svg]:size-4 [&>svg]:shrink-0",
+          VARIANT_CLASSES[@variant],
+          SIZE_CLASSES[@size]
+        ],
+        data: {
+          sidebar: "menu-button",
+          size: @size,
+          active: @active.to_s
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu_item.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuItem < Base
+    def view_template(&)
+      ul(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "group/menu-item relative",
+        data: {
+          sidebar: "menu-item"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu_skeleton.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuSkeleton < Base
+    def initialize(show_icon: false, **attrs)
+      @show_icon = show_icon
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs) do
+        Skeleton(class: "size-4 rounded-md", data: {sidebar: "menu-skeleton-icon"}) if @show_icon
+        Skeleton(
+          class: "h-4 max-w-[var(--skeleton-width)] flex-1",
+          data: {sidebar: "menu-skeleton-text"},
+          style: {"--skeleton-width" => "#{skeleton_width}%"}
+        )
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex h-8 items-center gap-2 rounded-md px-2",
+        data: {
+          sidebar: "menu-skeleton"
+        }
+      }
+    end
+
+    def skeleton_width
+      @_skeleton_width ||= rand(50..89)
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu_sub.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuSub < Base
+    def view_template(&)
+      ul(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l",
+          "border-sidebar-border px-2.5 py-0.5",
+          "group-data-[collapsible=icon]:hidden"
+        ],
+        data: {
+          sidebar: "menu-sub"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu_sub_button.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuSubButton < Base
+    SIZE_CLASSES = {
+      sm: "text-xs",
+      md: "text-sm"
+    }.freeze
+
+    def initialize(as: :button, size: :md, active: false, **attrs)
+      raise ArgumentError, "Invalid size: #{size}" unless SIZE_CLASSES.key?(size)
+
+      @as = as
+      @size = size
+      @active = active
+      super(**attrs)
+    end
+
+    def view_template(&)
+      tag(@as, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden",
+          "rounded-md px-2 text-sidebar-foreground outline-none",
+          "ring-sidebar-ring hover:bg-sidebar-accent",
+          "hover:text-sidebar-accent-foreground focus-visible:ring-2",
+          "active:bg-sidebar-accent active:text-sidebar-accent-foreground",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "aria-disabled:pointer-events-none aria-disabled:opacity-50",
+          "[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+          "[&>svg]:text-sidebar-accent-foreground",
+          "data-[active=true]:bg-sidebar-accent",
+          "data-[active=true]:text-sidebar-accent-foreground",
+          "group-data-[collapsible=icon]:hidden",
+          SIZE_CLASSES[@size]
+        ],
+        data: {
+          sidebar: "menu-sub-button",
+          size: @size,
+          active: @active.to_s
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu_sub_item.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenuSubItem < Base
+    def view_template(&)
+      li(**attrs, &)
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_rail.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarRail < Base
+    def view_template(&)
+      button(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all",
+          "ease-linear after:absolute after:inset-y-0 after:left-1/2",
+          "after:w-[2px] hover:after:bg-sidebar-border",
+          "group-data-[side=left]:-right-4 group-data-[side=right]:left-0",
+          "sm:flex [[data-side=left]_&]:cursor-w-resize",
+          "[[data-side=right]_&]:cursor-e-resize",
+          "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize",
+          "[[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+          "group-data-[collapsible=offcanvas]:translate-x-0",
+          "group-data-[collapsible=offcanvas]:after:left-full",
+          "group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+          "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+          "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2"
+        ],
+        data: {
+          sidebar: "rail",
+          tabindex: "-1",
+          action: "click->ruby-ui--sidebar#toggle"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_separator.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarSeparator < Base
+    def view_template(&)
+      Separator(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "mx-2 w-auto bg-sidebar-border",
+        data: {
+          sidebar: "separator"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_trigger.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarTrigger < Base
+    def view_template(&)
+      Button(variant: :ghost, size: :icon, **attrs) do
+        panel_left_icon
+        span(class: "sr-only") { "Toggle Sidebar" }
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "h-7 w-7 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        data: {
+          sidebar: "trigger",
+          action: "click->ruby-ui--sidebar#toggle"
+        }
+      }
+    end
+
+    def panel_left_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        class: "lucide lucide-panel-left"
+      ) do |s|
+        s.rect(width: "18", height: "18", x: "3", y: "3", rx: "2")
+        s.path(d: "M9 3v18")
+      end
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_wrapper.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarWrapper < Base
+    SIDEBAR_WIDTH = "16rem"
+    SIDEBAR_WIDTH_ICON = "3rem"
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "group/sidebar-wrapper [&:has([data-variant=inset])]:bg-sidebar flex min-h-svh w-full",
+        style: "--sidebar-width: #{SIDEBAR_WIDTH}; --sidebar-width-icon: #{SIDEBAR_WIDTH_ICON};",
+        data: {
+          controller: "ruby-ui--sidebar"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/switch/switch.rb

@@ -12,12 +12,22 @@ module RubyUI
     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"
+        class: [
+          "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors bg-input",
+          "has-checked:bg-primary",
+          "has-disabled:cursor-not-allowed has-disabled:opacity-50",
+          "has-aria-disabled:cursor-not-allowed has-aria-disabled:opacity-50 has-aria-disabled:pointer-events-none",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        ]
       ) 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 ")
+        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

data/lib/ruby_ui/table/table_footer.rb

@@ -10,7 +10,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: "border-t bg-muted bg-opacity-50 font-medium[& amp;>tr]:last:border-b-0"
+        class: "border-t bg-muted/50 font-medium[& amp;>tr]:last:border-b-0"
       }
     end
   end

data/lib/ruby_ui/table/table_row.rb

@@ -10,7 +10,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: "border-b transition-colors hover:bg-muted hover:bg-opacity-50 data-[state=selected]:bg-muted"
+        class: "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
       }
     end
   end

data/lib/ruby_ui/tabs/tabs_trigger.rb

@@ -21,7 +21,13 @@ module RubyUI
           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"
+        class: [
+          "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
+          "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        ]
       }
     end
   end

data/lib/ruby_ui/textarea/textarea.rb

@@ -19,7 +19,14 @@ module RubyUI
           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"
+        class: [
+          "flex w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors border-border",
+          "placeholder:text-muted-foreground",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
+        ]
       }
     end
   end

data/lib/ruby_ui/theme_toggle/set_dark_mode.rb

@@ -0,0 +1,16 @@
+# 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

data/lib/ruby_ui/theme_toggle/set_light_mode.rb

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

data/lib/ruby_ui/theme_toggle/theme_toggle.rb

@@ -5,37 +5,5 @@ module RubyUI
     def view_template(&)
       div(**attrs, &)
     end
-
-    def light_mode(**user_attrs, &)
-      light_attrs = mix(default_light_attrs, user_attrs)
-      div(**light_attrs, &)
-    end
-
-    def dark_mode(**user_attrs, &)
-      dark_attrs = mix(default_dark_attrs, user_attrs)
-      div(**dark_attrs, &)
-    end
-
-    private
-
-    def default_attrs
-      {
-        data: {controller: "ruby-ui--theme-toggle"}
-      }
-    end
-
-    def default_light_attrs
-      {
-        class: "dark:hidden",
-        data: {action: "click->ruby-ui--theme-toggle#setDarkTheme"}
-      }
-    end
-
-    def default_dark_attrs
-      {
-        class: "hidden dark:inline-block",
-        data: {action: "click->ruby-ui--theme-toggle#setLightTheme"}
-      }
-    end
   end
 end

data/lib/ruby_ui/tooltip/tooltip_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
-import { computePosition, autoUpdate, offset } from "@floating-ui/dom";
+import { computePosition, autoUpdate, offset, shift } from "@floating-ui/dom";
 
 export default class extends Controller {
   static targets = ["trigger", "content"];
@@ -23,10 +23,11 @@ export default class extends Controller {
   }
 
   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 }) => {
+      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`,

data/lib/ruby_ui.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RubyUI
-  VERSION = "1.0.0"
+  VERSION = "1.0.2"
 end