ruby_ui 1.0.0.beta1

data/lib/ruby_ui/pagination/pagination_ellipsis.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class PaginationEllipsis < Base
+    def view_template(&block)
+      li do
+        span(**attrs) do
+          icon
+          span(class: "sr-only") { "More pages" }
+        end
+      end
+    end
+
+    private
+
+    def 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: "h-4 w-4"
+      ) 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"
+      }
+    end
+  end
+end

data/lib/ruby_ui/pagination/pagination_item.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class PaginationItem < Base
+    def initialize(href: "#", active: false, **attrs)
+      @href = href
+      @active = active
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      li do
+        a(href: @href, **attrs, &block)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: {current: @active ? "page" : nil},
+        class: [
+          RubyUI::Button.new(variant: @active ? :outline : :ghost).attrs[:class]
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/popover/popover.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Popover < Base
+    def initialize(options: {}, **attrs)
+      @options = options
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--popover",
+          ruby_ui__popover_options_value: @options.to_json,
+          ruby_ui__popover_trigger_value: @options[:trigger] || "hover"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/popover/popover_content.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class PopoverContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__popover_target: "content"
+        },
+        class: [
+          "hidden z-50 rounded-md border bg-background p-1 text-foreground shadow-md outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+          "data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "absolute"
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/popover/popover_trigger.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class PopoverTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__popover_target: "trigger"
+        },
+        class: "inline-block"
+      }
+    end
+  end
+end

data/lib/ruby_ui/radio_button/radio_button.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class RadioButton < Base
+    def view_template
+      input(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "radio",
+        data: {
+          ruby_ui__form_field_target: "input",
+          action: "change->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
+        },
+        class: "h-4 w-4 p-0 border-primary rounded-full flex-none"
+      }
+    end
+  end
+end

data/lib/ruby_ui/select/select.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Select < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--select",
+          ruby_ui__select_open_value: "false",
+          action: "click@window->ruby-ui--select#clickOutside",
+          ruby_ui__select_ruby_ui__select_item_outlet: ".item"
+        },
+        class: "group/select w-full relative"
+      }
+    end
+  end
+end

data/lib/ruby_ui/select/select_content.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SelectContent < Base
+    def initialize(**attrs)
+      @id = "content#{SecureRandom.hex(4)}"
+      super
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        div(
+          class: "max-h-96 min-w-max overflow-auto rounded-md border bg-background p-1 text-foreground shadow-md animate-out group-data-[ruby-ui--select-open-value=true]/select:animate-in fade-out-0 group-data-[ruby-ui--select-open-value=true]/select:fade-in-0 zoom-out-95 group-data-[ruby-ui--select-open-value=true]/select:zoom-in-95 slide-in-from-top-2", &block
+        )
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        id: @id,
+        role: "listbox",
+        tabindex: "-1",
+        data: {
+          ruby_ui__select_target: "content"
+        },
+        class: "hidden w-full absolute top-0 left-0 z-50"
+      }
+    end
+  end
+end

data/lib/ruby_ui/select/select_group.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SelectGroup < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {}
+    end
+  end
+end

data/lib/ruby_ui/select/select_input.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SelectInput < Base
+    def view_template
+      input(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "hidden",
+        data: {
+          ruby_ui__select_target: "input",
+          ruby_ui__form_field_target: "input",
+          action: "change->ruby-ui--form-field#onChange invalid->ruby-ui--form-field#onInvalid"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/select/select_item.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SelectItem < Base
+    def initialize(value: nil, **attrs)
+      @value = value
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        selected_icon
+        block&.call
+      end
+    end
+
+    private
+
+    def selected_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        class: "invisible group-aria-selected:visible	mr-2 h-4 w-4 flex-none",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(
+          d: "M20 6 9 17l-5-5"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        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: {
+          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
+end

data/lib/ruby_ui/select/select_label.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SelectLabel < Base
+    def view_template(&)
+      h3(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "px-2 py-1.5 text-sm font-semibold"
+      }
+    end
+  end
+end

data/lib/ruby_ui/select/select_trigger.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SelectTrigger < Base
+    def view_template(&block)
+      button(**attrs) do
+        block&.call
+        icon
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        class: "ml-2 h-4 w-4 shrink-0 opacity-50",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(
+          d: "m7 15 5 5 5-5"
+        )
+        s.path(
+          d: "m7 9 5-5 5 5"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        data: {
+          action: "ruby-ui--select#onClick",
+          ruby_ui__select_target: "trigger"
+        },
+        type: "button",
+        role: "combobox",
+        aria: {
+          controls: "radix-:r0:",
+          expanded: "false",
+          autocomplete: "none",
+          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"
+      }
+    end
+  end
+end

data/lib/ruby_ui/select/select_value.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SelectValue < Base
+    def initialize(placeholder: nil, **attrs)
+      @placeholder = placeholder
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      span(**attrs) do
+        block ? block.call : @placeholder
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__select_target: "value"
+        },
+        class: "pointer-events-none"
+      }
+    end
+  end
+end

data/lib/ruby_ui/sheet/sheet.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Sheet < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {controller: "ruby-ui--sheet"}
+      }
+    end
+  end
+end

data/lib/ruby_ui/sheet/sheet_content.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SheetContent < Base
+    SIDE_CLASS = {
+      top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+      right: "inset-y-0 right-0 h-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+      bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+      left: "inset-y-0 left-0 h-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left"
+    }
+
+    def initialize(side: :right, **attrs)
+      @side = side
+      @side_classes = SIDE_CLASS[side]
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      template(data: {ruby_ui__sheet_target: "content"}) do
+        div(data: {controller: "ruby-ui--sheet-content"}) do
+          backdrop
+          div(**attrs) do
+            block&.call
+            close_button
+          end
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        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",
+          @side_classes
+        ]
+      }
+    end
+
+    def close_button
+      button(
+        type: "button",
+        class: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        data_action: "click->ruby-ui--sheet-content#close"
+      ) do
+        svg(
+          width: "15",
+          height: "15",
+          viewbox: "0 0 15 15",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          class: "h-4 w-4"
+        ) do |s|
+          s.path(
+            d:
+                  "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
+            fill: "currentColor",
+            fill_rule: "evenodd",
+            clip_rule: "evenodd"
+          )
+        end
+        span(class: "sr-only") { "Close" }
+      end
+    end
+
+    def backdrop
+      div(
+        data_state: "open",
+        data_action: "click->ruby-ui--sheet-content#close",
+        class:
+              "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      )
+    end
+  end
+end

data/lib/ruby_ui/sheet/sheet_description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SheetDescription < Base
+    def view_template(&)
+      p(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm text-muted-foreground"
+      }
+    end
+  end
+end

data/lib/ruby_ui/sheet/sheet_footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SheetFooter < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-y-2 sm:gap-y-0"
+      }
+    end
+  end
+end

data/lib/ruby_ui/sheet/sheet_header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SheetHeader < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-col space-y-1.5 text-center sm:text-left"
+      }
+    end
+  end
+end

data/lib/ruby_ui/sheet/sheet_middle.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SheetMiddle < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "py-4"
+      }
+    end
+  end
+end

data/lib/ruby_ui/sheet/sheet_title.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class SheetTitle < Base
+    def view_template(&)
+      h3(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-lg font-semibold leading-none tracking-tight"
+      }
+    end
+  end
+end

data/lib/ruby_ui/sheet/sheet_trigger.rb

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

data/lib/ruby_ui/shortcut_key/shortcut_key.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ShortcutKey < Base
+    def view_template(&)
+      kbd(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+      }
+    end
+  end
+end

data/lib/ruby_ui/table/table.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Table < Base
+    def view_template(&block)
+      div(class: "relative w-full overflow-auto") do
+        table(**attrs, &block)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "w-full caption-bottom text-sm"
+      }
+    end
+  end
+end

data/lib/ruby_ui/table/table_body.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class TableBody < Base
+    def view_template(&)
+      tbody(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "[&_tr:last-child]:border-0"
+      }
+    end
+  end
+end