rbui 0.0.0 → 1.0.0.pre.alpha.2

data/lib/rbui/dropdown_menu/dropdown_menu_label.rb

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RBUI
+  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/rbui/dropdown_menu/dropdown_menu_trigger.rb

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

data/lib/rbui/form/form.rb

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

data/lib/rbui/form/form_field.rb

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

data/lib/rbui/form/form_field_error.rb

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

data/lib/rbui/form/form_field_hint.rb

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

data/lib/rbui/form/form_field_label.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RBUI
+  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/rbui/hover_card/hover_card.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RBUI
+  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: "rbui--hover-card",
+          rbui__hover_card_options_value: @options.to_json
+        }
+      }
+    end
+  end
+end

data/lib/rbui/hover_card/hover_card_content.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RBUI
+  class HoverCardContent < Base
+    def view_template(&block)
+      template_tag(data: {rbui__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/rbui/hover_card/hover_card_trigger.rb

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

data/lib/rbui/input/input.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RBUI
+  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: {
+          rbui__form_field_target: "input",
+          action: "input->rbui--form-field#onInput invalid->rbui--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/rbui/link/link.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module RBUI
+  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
+      tokens(
+        "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
+      tokens(
+        "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
+      tokens(
+        "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
+      tokens(
+        "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
+      tokens(
+        "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
+      tokens(
+        "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/rbui/pagination/pagination.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RBUI
+  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/rbui/pagination/pagination_content.rb

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

data/lib/rbui/pagination/pagination_ellipsis.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module RBUI
+  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/rbui/pagination/pagination_item.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module RBUI
+  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: tokens(
+          RBUI::Button.new(variant: @active ? :outline : :ghost).attrs[:class]
+        )
+      }
+    end
+  end
+end

data/lib/rbui/popover/popover.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Popover < Base
+    def initialize(options: {}, **attrs)
+      @options = options
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "rbui--popover",
+          rbui__popover_options_value: @options.to_json
+        }
+      }
+    end
+  end
+end

data/lib/rbui/popover/popover_content.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RBUI
+  class PopoverContent < Base
+    def view_template(&block)
+      template_tag(data: {rbui__popover_target: "content"}) do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          state: :open
+        },
+        class: "z-50 rounded-md border bg-background p-2 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/rbui/popover/popover_trigger.rb

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

data/lib/rbui/radio_button/radio_button.rb

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

data/lib/rbui/select/select.rb

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

data/lib/rbui/select/select_content.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module RBUI
+  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-[rbui--select-open-value=true]/select:animate-in fade-out-0 group-data-[rbui--select-open-value=true]/select:fade-in-0 zoom-out-95 group-data-[rbui--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: {
+          rbui__select_target: "content"
+        },
+        class: "hidden w-full absolute top-0 left-0 z-50"
+      }
+    end
+  end
+end

data/lib/rbui/select/select_group.rb

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

data/lib/rbui/select/select_input.rb

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