ruby_ui 1.0.0.beta1

data/lib/ruby_ui/card/card_content.rb

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

data/lib/ruby_ui/card/card_description.rb

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

data/lib/ruby_ui/card/card_footer.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CardFooter < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "items-center p-6 pt-0"
+      }
+    end
+  end
+end

data/lib/ruby_ui/card/card_header.rb

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

data/lib/ruby_ui/card/card_title.rb

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

data/lib/ruby_ui/chart/chart.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Chart < Base
+    def initialize(options: {}, **attrs)
+      @options = options.to_json
+      super(**attrs)
+    end
+
+    def view_template(&)
+      canvas(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data_controller: "ruby-ui--chart",
+        data_ruby_ui__chart_options_value: @options
+      }
+    end
+  end
+end

data/lib/ruby_ui/checkbox/checkbox.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Checkbox < Base
+    def view_template
+      input(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "checkbox",
+        data: {
+          ruby_ui__form_field_target: "input",
+          ruby_ui__checkbox_group_target: "checkbox",
+          action: "change->ruby-ui--checkbox-group#onChange change->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
+        },
+        class: "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 accent-primary"
+      }
+    end
+  end
+end

data/lib/ruby_ui/checkbox/checkbox_group.rb

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

data/lib/ruby_ui/clipboard/clipboard.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Clipboard < Base
+    def initialize(options: {}, success: "Copied!", error: "Copy Failed!", **attrs)
+      @options = options
+      @success = success
+      @error = error
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        div(&block)
+        success_popover
+        error_popover
+      end
+    end
+
+    private
+
+    def success_popover
+      ClipboardPopover(type: :success) { @success }
+    end
+
+    def error_popover
+      ClipboardPopover(type: :error) { @error }
+    end
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--clipboard",
+          action: "click@window->ruby-ui--clipboard#onClickOutside",
+          ruby_ui__clipboard_success_value: @success,
+          ruby_ui__clipboard_error_value: @error,
+          ruby_ui__clipboard_options_value: @options.to_json
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/clipboard/clipboard_popover.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ClipboardPopover < Base
+    def initialize(type:, **attrs)
+      @type = type
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(
+        class: "hidden",
+        style: "width: max-content; position: absolute; top: 0; left: 0;",
+        data: {ruby_ui__clipboard_target: clipboard_target}
+      ) do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def clipboard_target
+      case @type
+      when :success
+        "successPopover"
+      when :error
+        "errorPopover"
+      end
+    end
+
+    def default_attrs
+      {
+        data: {
+          state: :open
+        },
+        class: "z-50 rounded-md text-sm border bg-background px-2 py-0.5 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/clipboard/clipboard_source.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ClipboardSource < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__clipboard_target: "source"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/clipboard/clipboard_trigger.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ClipboardTrigger < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__clipboard_target: "trigger",
+          action: "click->ruby-ui--clipboard#copy"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/codeblock/codeblock.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+require "rouge"
+
+module RubyUI
+  class Codeblock < Base
+    FORMATTER = ::Rouge::Formatters::HTML.new
+    ROUGE_CSS = Rouge::Themes::Github.mode(:dark).render(scope: ".highlight") # See themes here: https://rouge-ruby.github.io/docs/Rouge/CSSTheme.html
+
+    def initialize(code, syntax:, clipboard: true, clipboard_success: "Copied!", clipboard_error: "Copy failed!", **attrs)
+      @code = code
+      @syntax = syntax.to_sym
+      @clipboard = clipboard
+      @clipboard_success = clipboard_success
+      @clipboard_error = clipboard_error
+
+      if @syntax == :ruby || @syntax == :html
+        @code = @code.gsub(/(?:^|\G) {2}/m, "	")
+      end
+
+      super(**attrs)
+    end
+
+    def view_template
+      style { ROUGE_CSS } # For faster load times, move this to the head of your document. (Also move ROUGE_CSS value to head of document)
+      if @clipboard
+        with_clipboard
+      else
+        codeblock
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        style: {tab_size: 2},
+        class: "highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"
+      }
+    end
+
+    def with_clipboard
+      RubyUI.Clipboard(success: @clipboard_success, error: @clipboard_error, class: "relative") do
+        RubyUI.ClipboardSource do
+          codeblock
+        end
+        div(class: "absolute top-2 right-2") do
+          RubyUI.ClipboardTrigger do
+            RubyUI.Button(variant: :ghost, size: :sm, icon: true, class: "text-white hover:text-white hover:bg-white/20") { clipboard_icon }
+          end
+        end
+      end
+    end
+
+    def codeblock
+      div(**attrs) do
+        div(class: "after:content-none") do
+          pre { raw(safe(FORMATTER.format(lexer.lex(@code)))) }
+        end
+      end
+    end
+
+    def lexer
+      Rouge::Lexer.find(@syntax)
+    end
+
+    def clipboard_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewbox: "0 0 24 24",
+        stroke_width: "1.5",
+        stroke: "currentColor",
+        class: "w-4 h-4"
+      ) do |s|
+        s.path(
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          d:
+            "M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"
+        )
+      end
+    end
+
+    def check_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewbox: "0 0 24 24",
+        stroke_width: "1.5",
+        stroke: "currentColor",
+        class: "w-4 h-4"
+      ) do |s|
+        s.path(
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          d: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        )
+      end
+    end
+  end
+end

data/lib/ruby_ui/collapsible/collapsible.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Collapsible < Base
+    def initialize(open: false, **attrs)
+      @open = open
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--collapsible",
+          ruby_ui__collapsible_open_value: @open
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/collapsible/collapsible_content.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class CollapsibleContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {ruby_ui__collapsible_target: "content"},
+        class: "overflow-y-hidden"
+      }
+    end
+  end
+end

data/lib/ruby_ui/collapsible/collapsible_trigger.rb

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

data/lib/ruby_ui/combobox/combobox.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Combobox < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--combobox",
+          ruby_ui__combobox_open_value: "false",
+          action: "click@window->ruby-ui--combobox#onClickOutside",
+          ruby_ui__combobox_ruby_ui__combobox_content_outlet: ".combobox-content",
+          ruby_ui__combobox_ruby_ui__combobox_item_outlet: ".combobox-item"
+        },
+        class: "group/combobox w-full relative"
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_content.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxContent < Base
+    def initialize(**attrs)
+      @id = "content#{SecureRandom.hex(4)}"
+      super
+    end
+
+    def view_template(&)
+      div(**attrs) do
+        div(class: "min-w-max max-h-[300px] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-out group-data-[ruby-ui--combobox-open-value=true]/combobox:animate-in fade-out-0 group-data-[ruby-ui--combobox-open-value=true]/combobox:fade-in-0 zoom-out-95 group-data-[ruby-ui--combobox-open-value=true]/combobox:zoom-in-95 slide-in-from-top-2", &)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        id: @id,
+        role: "listbox",
+        data: {
+          controller: "ruby-ui--combobox-content",
+          ruby_ui__combobox_target: "content",
+          action: "keydown.enter->ruby-ui--combobox#onKeyEnter keydown.esc->ruby-ui--combobox#onEscKey keydown.down->ruby-ui--combobox#onKeyDown keydown.up->ruby-ui--combobox#onKeyUp"
+        },
+        class: "combobox-content hidden w-full absolute top-0 left-0 z-50"
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_empty.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxEmpty < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "presentation",
+        class: "hidden py-6 text-center text-sm",
+        data: {
+          ruby_ui__combobox_content_target: "empty"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_group.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxGroup < Base
+    def initialize(heading: nil, **attrs)
+      @heading = heading
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        render_header if @heading
+        render_items(&block)
+      end
+    end
+
+    private
+
+    def render_header
+      div(group_heading: @heading, class: "px-2 py-1.5 text-xs font-medium text-muted-foreground") { @heading }
+    end
+
+    def render_items(&)
+      div(group_items: "", role: "group", &)
+    end
+
+    def default_attrs
+      {
+        class: "overflow-hidden p-1 text-foreground",
+        role: "presentation",
+        data: {
+          value: @heading,
+          ruby_ui__combobox_content_target: "group"
+        }
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_input.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxInput < Base
+    def view_template
+      input(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "hidden",
+        data: {
+          ruby_ui__combobox_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/combobox/combobox_item.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxItem < Base
+    def initialize(value: nil, **attrs)
+      @value = value
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        div(class: "invisible group-aria-selected:visible") { icon }
+        block.call
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        class: "mr-2 h-4 w-4",
+        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:
+          "combobox-item group relative flex cursor-pointer select-none items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-[current]:bg-accent aria-[current]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        data: {
+          value: @value,
+          ruby_ui__combobox_target: "item",
+          ruby_ui__combobox_content_target: "item",
+          controller: "ruby-ui--combobox-item",
+          action: "click->ruby-ui--combobox#onItemSelected"
+        },
+        aria_selected: "false"
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_list.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxList < Base
+    def initialize(**attrs)
+      @id = "list#{SecureRandom.hex(4)}"
+      super
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        id: @id,
+        data: {
+          ruby_ui__combobox_target: "list"
+        },
+        role: "listbox",
+        tabindex: "-1"
+      }
+    end
+  end
+end