ruby_ui 1.0.1 → 1.1.0

data/lib/ruby_ui/progress/progress_docs.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class Views::Docs::Progress < Views::Base
+  def view_template
+    component = "Progress"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Progress", description: "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.")
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Progress(value: 50, class: "w-[60%]")
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With custom indicator color", context: self) do
+        <<~RUBY
+          Progress(value: 35, class: "w-[60%] [&>*]:bg-success")
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    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 dark:checked:bg-secondary checked:text-primary checked:border-primary",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
         ]
       }
     end

data/lib/ruby_ui/radio_button/radio_button_docs.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+class Views::Docs::RadioButton < Views::Base
+  def view_template
+    component = "RadioButton"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Radio Button", description: "A control that allows users to make a single selection from a list of options.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          div(class: "flex items-center space-x-2") do
+            RadioButton(id: "default")
+            FormFieldLabel(for: "default") { "Default" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Checked", context: self) do
+        <<~RUBY
+          div(class: "flex items-center space-x-2") do
+            RadioButton(id: "checked", checked: true)
+            FormFieldLabel(for: "checked") { "Checked" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          div(class: "flex flex-row items-center gap-2") do
+            RadioButton(class: "peer",id: "disabled", disabled: true)
+            FormFieldLabel(for: "disabled") { "Disabled" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+        <<~RUBY
+          div(class: "flex flex-row items-center gap-2") do
+            RadioButton(class: "peer", id: "aria-disabled", aria: {disabled: "true"})
+            FormFieldLabel(for: "aria-disabled") { "Aria Disabled" }
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/select/select_docs.rb

@@ -0,0 +1,129 @@
+# frozen_string_literal: true
+
+class Views::Docs::Select < Views::Base
+  def view_template
+    component = "Select"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Select", description: "Displays a list of options for the user to pick from—triggered by a button.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Select (Deconstructed)", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+
+            SelectContent(outlet_id: "select-a-fruit") do
+              SelectGroup do
+                SelectLabel { "Fruits" }
+                SelectItem(value: "apple") { "Apple" }
+                SelectItem(value: "orange") { "Orange" }
+                SelectItem(value: "banana") { "Banana" }
+                SelectItem(value: "watermelon") { "Watermelon" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Pre-selected Item", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "banana", id: "select-preselected-fruit")
+
+            SelectTrigger do
+              SelectValue(placeholder: "Select a fruit", id: "select-preselected-fruit") { "Banana" }
+            end
+
+            SelectContent(outlet_id: "select-preselected-fruit") do
+              SelectGroup do
+                SelectLabel { "Fruits" }
+                SelectItem(value: "apple") { "Apple" }
+                SelectItem(value: "orange") { "Orange" }
+                SelectItem(value: "banana") { "Banana" }
+                SelectItem(value: "watermelon") { "Watermelon" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger(disabled: true) do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Data Disabled", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+
+            SelectContent(outlet_id: "select-a-fruit") do
+              SelectGroup do
+                SelectLabel { "Fruits" }
+                SelectItem(data: {disabled: true}, value: "apple") { "Apple" }
+                SelectItem(value: "orange") { "Orange" }
+                SelectItem(value: "banana") { "Banana" }
+                SelectItem(data: {disabled: true}, value: "watermelon") { "Watermelon" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled Trigger", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger(aria: {disabled: "true"}) do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled Item", context: self) do
+        <<~RUBY
+          Select(class: "w-56") do
+            SelectInput(value: "apple", id: "select-a-fruit")
+
+            SelectTrigger do
+              SelectValue(placeholder: "Select a fruit", id: "select-a-fruit") { "Apple" }
+            end
+
+            SelectContent(outlet_id: "select-a-fruit") do
+              SelectGroup do
+                SelectLabel { "Fruits" }
+                SelectItem(aria: {disabled: "true"}, value: "apple") { "Apple" }
+                SelectItem(value: "orange") { "Orange" }
+                SelectItem(value: "banana") { "Banana" }
+                SelectItem(aria: {disabled: "true"}, value: "watermelon") { "Watermelon" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+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/separator/separator_docs.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class Views::Docs::Separator < Views::Base
+  def view_template
+    component = "Separator"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Separator", description: "Visually or semantically separates content.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          div do
+            div(class: "space-y-1") do
+              h4(class: "text-sm font-medium leading-none") { "RubyUI" }
+              p(class: "text-sm text-muted-foreground") { "An open-source UI component library." }
+            end
+            Separator(class: "my-4")
+            div(class: "flex h-5 items-center space-x-4 text-sm") do
+              div { "Blog" }
+              Separator(as: :hr, orientation: :vertical)
+              div { "Docs" }
+              Separator(orientation: :vertical)
+              div { "Source" }
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/sheet/sheet_content.rb

@@ -33,7 +33,7 @@ module RubyUI
       {
         data_state: "open", # For animate in
         class: [
-          "fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-scroll",
           @side_classes
         ]
       }

data/lib/ruby_ui/sheet/sheet_docs.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+class Views::Docs::Sheet < Views::Base
+  def view_template
+    component = "Sheet"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Sheet", description: "Extends the Sheet component to display content that complements the main content of the screen.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Sheet do
+            SheetTrigger do
+              Button(variant: :outline) { "Open Sheet" }
+            end
+            SheetContent(class: 'sm:max-w-sm') do
+              SheetHeader do
+                SheetTitle { "Edit profile" }
+                SheetDescription { "Make changes to your profile here. Click save when you're done." }
+              end
+
+              SheetMiddle do
+                label { "Name" }
+                Input(placeholder: "Joel Drapper") { "Joel Drapper" }
+                label { "Email" }
+                Input(placeholder: "joel@drapper.me")
+              end
+              SheetFooter do
+                Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { "Cancel" }
+                Button(type: "submit") { "Save" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Side", description: "Use the side property to indicate the edge of the screen where the component will appear.", context: self) do
+        <<~RUBY
+          div(class: 'grid grid-cols-2 gap-4') do
+            # -- TOP --
+            Sheet do
+              SheetTrigger do
+                Button(variant: :outline, class: 'w-full justify-center') { :top }
+              end
+              SheetContent(side: :top, class: ("sm:max-w-sm" if [:left, :right].include?(:top))) do
+                SheetHeader do
+                  SheetTitle { "Edit profile" }
+                  SheetDescription { "Make changes to your profile here. Click save when you're done." }
+                end
+                Form do
+                  SheetMiddle do
+                    label { "Name" }
+                    Input(placeholder: "Joel Drapper") { "Joel Drapper" }
+
+                    label { "Email" }
+                    Input(placeholder: "joel@drapper.me")
+                  end
+                  SheetFooter do
+                    Button(variant: :outline, data: { action: 'click->ruby-ui--sheet-content#close' }) { "Cancel" }
+                    Button(type: "submit") { "Save" }
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/shortcut_key/shortcut_key_docs.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Views::Docs::ShortcutKey < Views::Base
+  def view_template
+    component = "ShortcutKey"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Shortcut Key", description: "A component for displaying keyboard shortcuts.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          div(class: "flex flex-col items-center gap-y-4") do
+            ShortcutKey do
+              span(class: "text-xs") { "⌘" }
+              plain "K"
+            end
+            p(class: "text-muted-foreground text-sm text-center") { "Note this does not trigger anything, it is purely a visual prompt" }
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  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