ruby_ui 1.0.0.beta1

data/lib/ruby_ui/dialog/dialog_content.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DialogContent < Base
+    SIZES = {
+      xs: "max-w-sm",
+      sm: "max-w-md",
+      md: "max-w-lg",
+      lg: "max-w-2xl",
+      xl: "max-w-4xl",
+      full: "max-w-full"
+    }
+
+    def initialize(size: :md, **attrs)
+      @size = size
+      super(**attrs)
+    end
+
+    def view_template
+      template(data: {ruby_ui__dialog_target: "content"}) do
+        div(data_controller: "ruby-ui--dialog") do
+          backdrop
+          div(**attrs) do
+            yield
+            close_button
+          end
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data_state: "open",
+        class: [
+          "fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+          SIZES[@size]
+        ]
+      }
+    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--dialog#dismiss"
+      ) 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--dialog#dismiss esc->ruby-ui--dialog#dismiss",
+        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/dialog/dialog_description.rb

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

data/lib/ruby_ui/dialog/dialog_footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DialogFooter < 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/dialog/dialog_header.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DialogHeader < 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/dialog/dialog_middle.rb

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

data/lib/ruby_ui/dialog/dialog_title.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DialogTitle < 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/dialog/dialog_trigger.rb

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

data/lib/ruby_ui/dropdown_menu/dropdown_menu.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DropdownMenu < Base
+    def initialize(options: {}, **attrs)
+      @options = options
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--dropdown-menu",
+          action: "click@window->ruby-ui--dropdown-menu#onClickOutside",
+          ruby_ui__dropdown_menu_options_value: @options.to_json
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/dropdown_menu/dropdown_menu_content.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DropdownMenuContent < Base
+    def view_template(&block)
+      div(data: {ruby_ui__dropdown_menu_target: "content"}, class: "hidden", style: "width: max-content; position: absolute; top: 0; left: 0;") do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          state: :open
+        },
+        class: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md 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 w-56"
+      }
+    end
+  end
+end

data/lib/ruby_ui/dropdown_menu/dropdown_menu_item.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DropdownMenuItem < Base
+    def initialize(href: "#", **attrs)
+      @href = href
+      super(**attrs)
+    end
+
+    def view_template(&)
+      a(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        href: @href,
+        role: "menuitem",
+        class: "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_action: "click->ruby-ui--dropdown-menu#close",
+        data_ruby_ui__dropdown_menu_target: "menuItem",
+        tabindex: "-1",
+        data_orientation: "vertical"
+      }
+    end
+  end
+end

data/lib/ruby_ui/dropdown_menu/dropdown_menu_label.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DropdownMenuLabel < 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/dropdown_menu/dropdown_menu_separator.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DropdownMenuSeparator < Base
+    def view_template
+      div(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "separator",
+        aria_orientation: "horizontal",
+        class: "-mx-1 my-1 h-px bg-muted"
+      }
+    end
+  end
+end

data/lib/ruby_ui/dropdown_menu/dropdown_menu_trigger.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DropdownMenuTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {ruby_ui__dropdown_menu_target: "trigger", action: "click->ruby-ui--dropdown-menu#toggle"},
+        class: "inline-block"
+      }
+    end
+  end
+end

data/lib/ruby_ui/form/form.rb

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

data/lib/ruby_ui/form/form_field.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class FormField < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--form-field"
+        },
+        class: "space-y-2"
+      }
+    end
+  end
+end

data/lib/ruby_ui/form/form_field_error.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class FormFieldError < Base
+    def view_template(&)
+      p(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__form_field_target: "error"
+        },
+        class: "text-sm font-medium text-destructive"
+      }
+    end
+  end
+end

data/lib/ruby_ui/form/form_field_hint.rb

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

data/lib/ruby_ui/form/form_field_label.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class FormFieldLabel < Base
+    def view_template(&)
+      label(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"}
+    end
+  end
+end

data/lib/ruby_ui/hover_card/hover_card.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class HoverCard < Base
+    def initialize(option: {}, **attrs)
+      @options = option
+      @options[:delay] ||= [500, 250]
+      @options[:trigger] ||= "mouseenter focus click"
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--hover-card",
+          ruby_ui__hover_card_options_value: @options.to_json
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/hover_card/hover_card_content.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class HoverCardContent < Base
+    def view_template(&block)
+      template(data: {ruby_ui__hover_card_target: "content"}) do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          state: :open
+        },
+        class: "z-50 rounded-md border bg-background p-4 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"
+      }
+    end
+  end
+end

data/lib/ruby_ui/hover_card/hover_card_trigger.rb

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

data/lib/ruby_ui/input/input.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Input < Base
+    def initialize(type: :string, **attrs)
+      @type = type.to_sym
+      super(**attrs)
+    end
+
+    def view_template
+      input(type: @type, **attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          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"
+      }
+    end
+  end
+end

data/lib/ruby_ui/link/link.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Link < Base
+    def initialize(href: "#", variant: :link, size: :md, icon: false, **attrs)
+      @href = href
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @icon = icon
+      super(**attrs)
+    end
+
+    def view_template(&)
+      a(href: @href, **attrs, &)
+    end
+
+    private
+
+    def size_classes
+      if @icon
+        case @size
+        when :sm then "h-6 w-6"
+        when :md then "h-9 w-9"
+        when :lg then "h-10 w-10"
+        when :xl then "h-12 w-12"
+        end
+      else
+        case @size
+        when :sm then "px-3 py-1.5 h-8 text-xs"
+        when :md then "px-4 py-2 h-9 text-sm"
+        when :lg then "px-4 py-2 h-10 text-base"
+        when :xl then "px-6 py-3 h-12 text-base"
+        end
+      end
+    end
+
+    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
+      ]
+    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
+      ]
+    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
+      ]
+    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
+      ]
+    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
+      ]
+    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
+      ]
+    end
+
+    def default_classes
+      case @variant
+      when :primary then primary_classes
+      when :link then link_classes
+      when :secondary then secondary_classes
+      when :destructive then destructive_classes
+      when :outline then outline_classes
+      when :ghost then ghost_classes
+      end
+    end
+
+    def default_attrs
+      {
+        type: "button",
+        class: default_classes
+      }
+    end
+  end
+end

data/lib/ruby_ui/masked_input/masked_input.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class MaskedInput < Base
+    def view_template
+      Input(type: "text", **attrs)
+    end
+
+    private
+
+    def default_attrs
+      {data: {controller: "ruby-ui--masked-input"}}
+    end
+  end
+end

data/lib/ruby_ui/pagination/pagination.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Pagination < Base
+    def view_template(&)
+      nav(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: {label: "pagination"},
+        class: "mx-auto flex w-full justify-center",
+        role: "navigation"
+      }
+    end
+  end
+end

data/lib/ruby_ui/pagination/pagination_content.rb

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