ruby_ui 1.0.0 → 1.0.2

data/lib/ruby_ui/input/input.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 h-9 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 h-9 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/link/link.rb

@@ -2,6 +2,13 @@
 
 module RubyUI
   class Link < Base
+    BASE_CLASSES = [
+      "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
+    ].freeze
+
     def initialize(href: "#", variant: :link, size: :md, icon: false, **attrs)
       @href = href
       @variant = variant.to_sym
@@ -36,43 +43,55 @@ module RubyUI
 
     def primary_classes
       [
-        "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
+        BASE_CLASSES,
+        size_classes,
+        "bg-primary text-primary-foreground shadow",
+        "hover:bg-primary/90"
       ]
     end
 
     def link_classes
       [
-        "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
+        BASE_CLASSES,
+        size_classes,
+        "text-primary underline-offset-4",
+        "hover:underline"
       ]
     end
 
     def secondary_classes
       [
-        "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
+        BASE_CLASSES,
+        size_classes,
+        "bg-secondary text-secondary-foreground",
+        "hover:bg-opacity-80"
       ]
     end
 
     def destructive_classes
       [
-        "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
+        BASE_CLASSES,
+        size_classes,
+        "bg-destructive text-white shadow-sm",
+        "[a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20",
+        "dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
       ]
     end
 
     def outline_classes
       [
-        "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
+        BASE_CLASSES,
+        size_classes,
+        "border border-input bg-background shadow-sm",
+        "hover:bg-accent hover:text-accent-foreground"
       ]
     end
 
     def ghost_classes
       [
-        "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
+        BASE_CLASSES,
+        size_classes,
+        "hover:bg-accent hover:text-accent-foreground"
       ]
     end
 
@@ -88,10 +107,7 @@ module RubyUI
     end
 
     def default_attrs
-      {
-        type: "button",
-        class: default_classes
-      }
+      {type: "button", class: default_classes}
     end
   end
 end

data/lib/ruby_ui/radio_button/radio_button.rb

@@ -17,7 +17,9 @@ module RubyUI
         },
         class: [
           "h-4 w-4 p-0 border-primary rounded-full flex-none",
-          "disabled:cursor-not-allowed disabled:opacity-50"
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "checked:bg-primary checked:text-primary-foreground",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
         ]
       }
     end

data/lib/ruby_ui/select/select_item.rb

@@ -37,15 +37,24 @@ module RubyUI
       {
         role: "option",
         tabindex: "0",
-        class: "item group relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        data_value: @value,
+        aria_selected: "false",
+        data_orientation: "vertical",
+        class: [
+          "item group relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
+          "focus:bg-accent focus:text-accent-foreground",
+          "hover:bg-accent hover:text-accent-foreground",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
+        ],
         data: {
           controller: "ruby-ui--select-item",
           action: "click->ruby-ui--select#selectItem keydown.enter->ruby-ui--select#selectItem keydown.down->ruby-ui--select#handleKeyDown keydown.up->ruby-ui--select#handleKeyUp keydown.esc->ruby-ui--select#handleEsc",
           ruby_ui__select_target: "item"
-        },
-        data_value: @value,
-        data_orientation: "vertical",
-        aria_selected: "false"
+        }
+
       }
     end
   end

data/lib/ruby_ui/select/select_trigger.rb

@@ -33,12 +33,12 @@ module RubyUI
 
     def default_attrs
       {
+        type: "button",
+        role: "combobox",
         data: {
           action: "ruby-ui--select#onClick",
           ruby_ui__select_target: "trigger"
         },
-        type: "button",
-        role: "combobox",
         aria: {
           controls: "radix-:r0:",
           expanded: "false",
@@ -46,8 +46,13 @@ module RubyUI
           haspopup: "listbox",
           activedescendant: true
         },
-        class:
-          "truncate w-full flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+        class: [
+          "truncate w-full flex h-9 items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background",
+          "placeholder:text-muted-foreground",
+          "focus:outline-none focus:ring-1 focus:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
+        ]
       }
     end
   end

data/lib/ruby_ui/sidebar/collapsible_sidebar.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CollapsibleSidebar < Base
+    def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, open: true, **attrs)
+      @side = side
+      @variant = variant
+      @collapsible = collapsible
+      @open = open
+      super(**attrs)
+    end
+
+    def view_template(&)
+      MobileSidebar(side: @side, **attrs, &)
+      div(**mix(sidebar_attrs, attrs)) do
+        div(**gap_element_attrs)
+        div(**content_wrapper_attrs) do
+          div(**content_attrs, &)
+        end
+      end
+    end
+
+    private
+
+    def sidebar_attrs
+      {
+        class: "group peer hidden text-sidebar-foreground md:block",
+        data: {
+          state: @open ? "expanded" : "collapsed",
+          collapsible: @open ? "" : @collapsible,
+          variant: @variant,
+          side: @side,
+          collapsible_kind: @collapsible,
+          ruby_ui__sidebar_target: "sidebar"
+        }
+      }
+    end
+
+    def gap_element_attrs
+      {
+        class: [
+          "relative w-[var(--sidebar-width)] bg-transparent transition-[width]",
+          "duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant_classes
+        ]
+      }
+    end
+
+    def content_wrapper_attrs
+      {
+        class: [
+          "fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)]",
+          "transition-[left,right,width] duration-200 ease-linear md:flex",
+          content_wrapper_side_classes,
+          content_wrapper_variant_classes
+        ]
+      }
+    end
+
+    def content_attrs
+      {
+        class: [
+          "flex h-full w-full flex-col bg-sidebar",
+          "group-data-[variant=floating]:rounded-lg",
+          "group-data-[variant=floating]:border",
+          "group-data-[variant=floating]:border-sidebar-border",
+          "group-data-[variant=floating]:shadow"
+        ],
+        data: {
+          sidebar: "sidebar"
+        }
+      }
+    end
+
+    def variant_classes
+      if %i[floating inset].include?(@variant)
+        "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+      else
+        "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
+      end
+    end
+
+    def content_wrapper_side_classes
+      return "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" if @side == :left
+
+      "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]"
+    end
+
+    def content_wrapper_variant_classes
+      if %i[floating inset].include?(@variant)
+        "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+      else
+        "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l"
+      end
+    end
+  end
+end

data/lib/ruby_ui/sidebar/mobile_sidebar.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class MobileSidebar < Base
+    SIDEBAR_WIDTH_MOBILE = "18rem"
+
+    def initialize(side: :left, **attrs)
+      @side = side
+      super(**attrs)
+    end
+
+    def view_template(&)
+      Sheet(**attrs) do
+        SheetContent(
+          side: @side,
+          class: "w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+          style: {
+            "--sidebar-width": SIDEBAR_WIDTH_MOBILE
+          },
+          data: {
+            sidebar: "sidebar",
+            mobile: "true"
+          }
+        ) do
+          SheetHeader(class: "sr-only") do
+            SheetTitle { "Sidebar" }
+            SheetDescription { "Displays the mobile sidebar." }
+          end
+          div(class: "flex h-full w-full flex-col", &)
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__sidebar_target: "mobileSidebar",
+          action: "ruby--ui-sidebar:open->ruby-ui--sheet#open:self"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/non_collapsible_sidebar.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NonCollapsibleSidebar < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground"
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Sidebar < Base
+    SIDES = %i[left right].freeze
+    VARIANTS = %i[sidebar floating inset].freeze
+    COLLAPSIBLES = %i[offcanvas icon none].freeze
+
+    def initialize(side: :left, variant: :sidebar, collapsible: :offcanvas, open: true, **attrs)
+      raise ArgumentError, "Invalid side: #{side}." unless SIDES.include?(side.to_sym)
+      raise ArgumentError "Invalid variant: #{variant}." unless VARIANTS.include?(variant.to_sym)
+      raise ArgumentError, "Invalid collapsible: #{collapsible}." unless COLLAPSIBLES.include?(collapsible.to_sym)
+
+      @side = side.to_sym
+      @variant = variant.to_sym
+      @collapsible = collapsible.to_sym
+      @open = open
+      super(**attrs)
+    end
+
+    def view_template(&)
+      if @collapsible == :none
+        NonCollapsibleSidebar(**attrs, &)
+      else
+        CollapsibleSidebar(side: @side, variant: @variant, collapsible: @collapsible, open: @open, **attrs, &)
+      end
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_content.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        data: {
+          sidebar: "content"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_controller.js

@@ -0,0 +1,67 @@
+import { Controller } from "@hotwired/stimulus";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const State = {
+  EXPANDED: "expanded",
+  COLLAPSED: "collapsed",
+};
+const MOBILE_BREAKPOINT = 768;
+
+export default class extends Controller {
+  static targets = ["sidebar", "mobileSidebar"];
+
+  sidebarTargetConnected() {
+    const { state, collapsibleKind } = this.sidebarTarget.dataset;
+
+    this.open = state === State.EXPANDED;
+    this.collapsibleKind = collapsibleKind;
+  }
+
+  toggle(e) {
+    e.preventDefault();
+
+    if (this.#isMobile()) {
+      this.#openMobileSidebar();
+
+      return;
+    }
+
+    this.open = !this.open;
+    this.onToggle();
+  }
+
+  onToggle() {
+    this.#updateSidebarState();
+    this.#persistSidebarState();
+  }
+
+  #updateSidebarState() {
+    if (!this.hasSidebarTarget) {
+      return;
+    }
+
+    const { dataset } = this.sidebarTarget;
+
+    dataset.state = this.open ? State.EXPANDED : State.COLLAPSED;
+    dataset.collapsible = this.open ? "" : this.collapsibleKind;
+  }
+
+  #persistSidebarState() {
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${this.open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+  }
+
+  #isMobile() {
+    return window.innerWidth < MOBILE_BREAKPOINT;
+  }
+
+  #openMobileSidebar() {
+    if (!this.hasMobileSidebarTarget) {
+      return;
+    }
+
+    this.mobileSidebarTarget.dispatchEvent(
+      new CustomEvent("ruby--ui-sidebar:open"),
+    );
+  }
+}

data/lib/ruby_ui/sidebar/sidebar_footer.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarFooter < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col gap-2 p-2",
+        data: {
+          sidebar: "footer"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_group.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarGroup < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "relative flex w-full min-w-0 flex-col p-2",
+        data: {
+          sidebar: "group"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_group_action.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarGroupAction < Base
+    def initialize(as: :button, **attrs)
+      @as = as
+      super(**attrs)
+    end
+
+    def view_template(&)
+      tag(@as, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "absolute right-3 top-3.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 [&>svg]:size-4 [&>svg]:shrink-0",
+          "after:absolute after:-inset-2 after:md:hidden",
+          "group-data-[collapsible=icon]:hidden"
+        ],
+        data: {
+          sidebar: "group-action"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_group_content.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarGroupContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "w-full text-sm",
+        data: {
+          sidebar: "group-content"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_group_label.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarGroupLabel < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs",
+          "font-medium text-sidebar-foreground/70 outline-none",
+          "ring-sidebar-ring transition-[margin,opacity] duration-200",
+          "ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0"
+        ],
+        data: {
+          sidebar: "group-label"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_header.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarHeader < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col gap-2 p-2",
+        data: {
+          sidebar: "header"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_input.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarInput < Base
+    def view_template(&)
+      Input(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        data: {
+          sidebar: "input"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_inset.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarInset < Base
+    def view_template(&)
+      main(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: [
+          "relative flex w-full flex-1 flex-col bg-background",
+          "md:peer-data-[variant=inset]:m-2",
+          "md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2",
+          "md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl",
+          "md:peer-data-[variant=inset]:shadow"
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/sidebar/sidebar_menu.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SidebarMenu < Base
+    def view_template(&)
+      ul(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex w-full min-w-0 flex-col gap-1",
+        data: {
+          sidebar: "menu"
+        }
+      }
+    end
+  end
+end