Merge branch 'main' into switch

Author: sethhorsley

Gemfile.lock

@@ -14,10 +14,10 @@ GIT
 
 GIT
   remote: https://github.com/ruby-ui/ruby_ui.git
-  revision: 8909f0ecdd9ade28b01d76946e9d7438849b5856
+  revision: aa983e83f1ece8a3f62c4e816c07d2a2f17b6b90
   branch: main
   specs:
-    ruby_ui (1.0.0.pre.alpha.4)
+    ruby_ui (1.0.0.beta1)
 
 GEM
   remote: https://rubygems.org/

README.md

@@ -2,54 +2,6 @@ Rails need a plug n play system for creating streamlined ui components.
 
 Phlex looks fun and fast, so I thought I'd start creating ui components with it.
 
-Here is the list of components that are being built. For reference, see here https://ui.shadcn.com/docs/components/accordion
-
-✅ Accordion
-✅ Alert
-✅ Alert Dialog
-✅ Aspect Ratio
-✅ Avatar
-✅ Badge
-✅ Button
-✅ Calendar
-✅ Card
-✅ Checkbox
-✅ Checkbox Group
-✅ Codeblock
-✅ Collapsible
-⚪️ Combobox
-✅ Command
-⚪️ Context Menu
-⚪️ Data Table
-✅ Date Picker
-✅ Dialog
-✅ Dropdown Menu
-⚪️ Form
-✅ Hover Card
-✅ Input
-✅ Label
-✅ Link
-⚪️ Menubar
-⚪️ Navigation Menu
-✅ Pagination
-✅ Popover
-⚪️ Progress
-⚪️ Radio Group
-⚪️ Scroll Area
-⚪️ Select
-⚪️ Separator
-✅ Sheet
-⚪️ Skeleton
-⚪️ Slider
-⚪️ Switch
-⚪️ Table
-✅ Tabs
-✅ Textarea
-⚪️ Toast
-⚪️ Toggle
-✅ Tooltip
-✅ Typography
-
 ## Contributing - Local Development Setup
 
 ### Install the Gem Locally
@@ -60,14 +12,6 @@ To contribute to this project, it's recommended to install the gem locally and p
 gem "ruby_ui", path: "../ruby_ui"
 ```
 
-### Link the JavaScript Package
-
-Similarly, link the rbui-js package locally using yarn:
-
-```bash
-yarn add ../ruby_ui
-```
-
 ## Working with Components
 
 ### Component Development Workflow

app/assets/.DS_Store

@@ -27,7 +27,7 @@ def colors
     end
 
     def default_attrs
-      base_classes = "backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8"
+      base_classes = "backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg~*]:ps-8"
       {
         class: [base_classes, colors]
       }

app/assets/images/logo.svg

@@ -10,7 +10,7 @@ def view_template(&)
 
     def default_attrs
       {
-        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
+        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 rtl:space-x-reverse"
       }
     end
   end

app/assets/images/logo_dark.svg

@@ -10,7 +10,7 @@ def view_template(&)
 
     def default_attrs
       {
-        class: "flex flex-col space-y-2 text-center sm:text-left"
+        class: "flex flex-col space-y-2 text-center sm:text-left rtl:sm:text-right"
       }
     end
   end

app/components/ruby_ui/alert.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Breadcrumb < Base
+    def view_template(&)
+      nav(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: {label: "breadcrumb"}
+      }
+    end
+  end
+end

app/components/ruby_ui/alert_dialog/alert_dialog_footer.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbEllipsis < Base
+    def view_template(&)
+      span(**attrs) do
+        icon
+        span(class: "sr-only") { "More" }
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "w-4 h-4",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.circle(cx: "12", cy: "12", r: "1")
+        s.circle(cx: "19", cy: "12", r: "1")
+        s.circle(cx: "5", cy: "12", r: "1")
+      end
+    end
+
+    def default_attrs
+      {
+        aria: {hidden: true},
+        class: "flex h-9 w-9 items-center justify-center",
+        role: "presentation"
+      }
+    end
+  end
+end

app/components/ruby_ui/alert_dialog/alert_dialog_header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbItem < Base
+    def view_template(&)
+      li(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "inline-flex items-center gap-1.5"
+      }
+    end
+  end
+end

app/components/ruby_ui/breadcrumb.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbLink < Base
+    def initialize(href: "#", **attrs)
+      @href = href
+      super(**attrs)
+    end
+
+    def view_template(&)
+      a(href: @href, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "transition-colors hover:text-foreground"
+      }
+    end
+  end
+end

app/components/ruby_ui/breadcrumb/breadcrumb_ellipsis.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbList < Base
+    def view_template(&)
+      ol(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5"
+      }
+    end
+  end
+end

app/components/ruby_ui/breadcrumb/breadcrumb_item.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbPage < Base
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: {disabled: true, current: "page"},
+        class: "font-normal text-foreground",
+        role: "link"
+      }
+    end
+  end
+end