m9sh 0.1.0

data/app/components/m9sh/collapsible_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module M9sh
+  class CollapsibleComponent < BaseComponent
+    include Utilities
+
+    renders_one :trigger, lambda { |&block|
+      tag.div(
+        data: { action: "click->m9sh--collapsible#toggle" }
+      ) { block.call }
+    }
+
+    renders_one :collapsible_content, lambda { |&block|
+      tag.div(
+        class: "overflow-hidden transition-all duration-300 data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+        data: {
+          m9sh__collapsible_target: "content"
+        }
+      ) do
+        tag.div(
+          class: "pt-0",
+          data: { m9sh__collapsible_target: "inner" }
+        ) { block.call }
+      end
+    }
+
+    def initialize(open: false, **extra_attrs)
+      @open = open
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        **component_attrs(""),
+        data: {
+          controller: "m9sh--collapsible",
+          m9sh__collapsible_open_value: @open
+        }
+      ) do
+        safe_join([
+          trigger,
+          collapsible_content
+        ].compact)
+      end
+    end
+  end
+end

data/app/components/m9sh/dialog_component.rb

@@ -0,0 +1,123 @@
+# frozen_string_literal: true
+
+module M9sh
+  class DialogComponent < BaseComponent
+    include Utilities
+
+    renders_one :trigger
+    renders_one :header
+    renders_one :footer
+    renders_one :title
+    renders_one :description
+
+    def initialize(open: false, **extra_attrs)
+      @open = open
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        data: {
+          controller: "m9sh--dialog",
+          m9sh__dialog_open_value: @open.to_s
+        }
+      ) do
+        safe_join([
+          render_trigger,
+          render_dialog
+        ])
+      end
+    end
+
+    private
+
+    def render_trigger
+      return unless trigger?
+
+      tag.div(
+        trigger,
+        data: {
+          action: "click->m9sh--dialog#open",
+          m9sh__dialog_target: "trigger"
+        }
+      )
+    end
+
+    def render_dialog
+      tag.div(
+        class: overlay_classes,
+        data: {
+          m9sh__dialog_target: "overlay",
+          action: "click->m9sh--dialog#handleBackdropClick"
+        },
+        style: @open ? "" : "display: none;",
+        role: "dialog",
+        "aria-modal": "true"
+      ) do
+        tag.div(
+          class: content_classes,
+          data: { m9sh__dialog_target: "content" }
+        ) do
+          safe_join([
+            render_close_button,
+            render_header,
+            render_body,
+            render_footer
+          ].compact)
+        end
+      end
+    end
+
+    def render_close_button
+      tag.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->m9sh--dialog#close" }
+      ) do
+        tag.svg(
+          class: "h-4 w-4",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        ) do
+          tag.line(x1: "18", y1: "6", x2: "6", y2: "18") +
+          tag.line(x1: "6", y1: "6", x2: "18", y2: "18")
+        end
+      end
+    end
+
+    def render_header
+      return unless header? || title? || description?
+
+      tag.div(class: "flex flex-col space-y-1.5 text-center sm:text-left") do
+        safe_join([
+          title? ? tag.h2(title, class: "text-lg font-semibold leading-none tracking-tight") : nil,
+          description? ? tag.p(description, class: "text-sm text-muted-foreground") : nil,
+          header
+        ].compact)
+      end
+    end
+
+    def render_body
+      tag.div(class: "py-4") { content }
+    end
+
+    def render_footer
+      return unless footer?
+
+      tag.div(class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2") { footer }
+    end
+
+    def overlay_classes
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
+    end
+
+    def content_classes
+      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg 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"
+    end
+  end
+end

data/app/components/m9sh/dropdown_menu_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module M9sh
+  class DropdownMenuComponent < BaseComponent
+    attr_reader :align, :side
+
+    def initialize(align: "end", side: "bottom", **extra_attrs)
+      @align = align
+      @side = side
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        data: {
+          controller: "m9sh--dropdown-menu",
+          m9sh__dropdown_menu_align_value: align,
+          m9sh__dropdown_menu_side_value: side
+        },
+        class: "relative inline-block text-left",
+        **(@extra_attrs || {})
+      ) do
+        content
+      end
+    end
+  end
+end

data/app/components/m9sh/dropdown_menu_content_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module M9sh
+  class DropdownMenuContentComponent < BaseComponent
+    def call
+      tag.div(
+        data: {
+          m9sh__dropdown_menu_target: "content",
+          transition_enter: "transition ease-out duration-100",
+          transition_enter_start: "transform opacity-0 scale-95",
+          transition_enter_end: "transform opacity-100 scale-100",
+          transition_leave: "transition ease-in duration-75",
+          transition_leave_start: "transform opacity-100 scale-100",
+          transition_leave_end: "transform opacity-0 scale-95"
+        },
+        class: "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg hidden",
+        style: "position: absolute;",
+        **(@extra_attrs || {})
+      ) do
+        content
+      end
+    end
+  end
+end

data/app/components/m9sh/dropdown_menu_item_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module M9sh
+  class DropdownMenuItemComponent < BaseComponent
+    attr_reader :href, :method
+
+    def initialize(href: nil, method: nil, **extra_attrs)
+      @href = href
+      @method = method
+      super(**extra_attrs)
+    end
+
+    def call
+      if href
+        link_to href, method: method, class: item_classes, **(@extra_attrs || {}) do
+          content
+        end
+      else
+        tag.button(
+          type: "button",
+          class: item_classes,
+          data: { action: "click->m9sh--dropdown-menu#hide" },
+          **(@extra_attrs || {})
+        ) do
+          content
+        end
+      end
+    end
+
+    private
+
+    def item_classes
+      "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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+    end
+  end
+end

data/app/components/m9sh/dropdown_menu_separator_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module M9sh
+  class DropdownMenuSeparatorComponent < BaseComponent
+    def call
+      tag.div(class: "-mx-1 my-1 h-px bg-border", **(@extra_attrs || {}))
+    end
+  end
+end

data/app/components/m9sh/dropdown_menu_trigger_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module M9sh
+  class DropdownMenuTriggerComponent < BaseComponent
+    def call
+      tag.button(
+        data: {
+          action: "click->m9sh--dropdown-menu#toggle click@window->m9sh--dropdown-menu#hide",
+          m9sh__dropdown_menu_target: "trigger"
+        },
+        type: "button",
+        class: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        **(@extra_attrs || {})
+      ) do
+        content
+      end
+    end
+  end
+end

data/app/components/m9sh/hover_card_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module M9sh
+  class HoverCardComponent < BaseComponent
+    include Utilities
+
+    renders_one :trigger, lambda { |&block|
+      tag.div(
+        data: {
+          action: "mouseenter->m9sh--hover-card#show mouseleave->m9sh--hover-card#hide",
+          m9sh__hover_card_target: "trigger"
+        }
+      ) { block.call }
+    }
+
+    renders_one :hover_content, lambda { |&block|
+      tag.div(
+        class: "absolute z-50 w-64 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none hidden 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: {
+          m9sh__hover_card_target: "content",
+          action: "mouseenter->m9sh--hover-card#cancelHide mouseleave->m9sh--hover-card#hide"
+        }
+      ) { block.call }
+    }
+
+    def initialize(open_delay: 200, close_delay: 300, **extra_attrs)
+      @open_delay = open_delay
+      @close_delay = close_delay
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        **component_attrs("relative inline-block"),
+        data: {
+          controller: "m9sh--hover-card",
+          m9sh__hover_card_open_delay_value: @open_delay,
+          m9sh__hover_card_close_delay_value: @close_delay
+        }
+      ) do
+        safe_join([
+          trigger,
+          hover_content
+        ].compact)
+      end
+    end
+  end
+end

data/app/components/m9sh/input_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module M9sh
+  class InputComponent < BaseComponent
+    include Utilities
+
+    def initialize(type: "text", name: nil, value: nil, placeholder: nil, disabled: false, **extra_attrs)
+      @type = type
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @disabled = disabled
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.input(
+        **component_attrs(base_classes),
+        type: @type,
+        name: @name,
+        value: @value,
+        placeholder: @placeholder,
+        disabled: @disabled
+      )
+    end
+
+    private
+
+    def base_classes
+      "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+    end
+  end
+end

data/app/components/m9sh/label_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module M9sh
+  class LabelComponent < BaseComponent
+    include Utilities
+
+    def initialize(for_id: nil, **extra_attrs)
+      @for_id = for_id
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.label(
+        content,
+        **component_attrs(base_classes),
+        for: @for_id,
+        data: { slot: "label" }
+      )
+    end
+
+    private
+
+    def base_classes
+      "flex items-center gap-2 text-sm leading-none font-medium text-foreground select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+    end
+  end
+end

data/app/components/m9sh/main_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module M9sh
+  class MainComponent < BaseComponent
+    include Utilities
+
+    def call
+      tag.div(
+        **component_attrs("flex-1 flex flex-col m-4 rounded-lg shadow-xl bg-card overflow-hidden border border-border"),
+        data: { slot: "main" }
+      ) do
+        content
+      end
+    end
+  end
+end

data/app/components/m9sh/navigation_menu_component.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module M9sh
+  class NavigationMenuComponent < BaseComponent
+    include Utilities
+
+    renders_many :items, "ItemComponent"
+
+    def call
+      tag.nav(
+        **component_attrs("relative z-10 flex max-w-max flex-1 items-center justify-center"),
+        data: { controller: "m9sh--navigation-menu" }
+      ) do
+        tag.div(
+          class: "group flex flex-1 list-none items-center justify-center space-x-1",
+          role: "group"
+        ) do
+          safe_join(items)
+        end
+      end
+    end
+
+    class ItemComponent < BaseComponent
+      include Utilities
+
+      renders_one :trigger, lambda { |text = nil, &block|
+        content = block ? block.call : text
+        tag.button(
+          type: "button",
+          class: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50",
+          data: {
+            action: "mouseenter->m9sh--navigation-menu#onTriggerEnter mouseleave->m9sh--navigation-menu#onTriggerLeave click->m9sh--navigation-menu#toggle",
+            m9sh__navigation_menu_target: "trigger",
+            state: "closed"
+          }
+        ) do
+          safe_join([
+            content,
+            tag.svg(
+              class: "relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180",
+              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",
+              aria: { hidden: "true" }
+            ) do
+              tag.path(d: "m6 9 6 6 6-6")
+            end
+          ])
+        end
+      }
+
+      renders_one :menu_content, lambda { |&block|
+        tag.div(
+          class: "absolute left-1/2 top-full -translate-x-1/2 w-full md:w-auto",
+          style: "display: none;",
+          data: {
+            action: "mouseenter->m9sh--navigation-menu#onContentEnter mouseleave->m9sh--navigation-menu#onContentLeave",
+            m9sh__navigation_menu_target: "content",
+            state: "closed"
+          }
+        ) do
+          tag.div(
+            class: "relative mt-1.5 overflow-hidden rounded-lg border border-border bg-popover text-popover-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: { state: "closed" }
+          ) do
+            block.call
+          end
+        end
+      }
+
+      renders_one :link, lambda { |href:, &block|
+        tag.a(
+          href: href,
+          class: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50"
+        ) { block.call }
+      }
+
+      def call
+        tag.div(class: "relative", data: { m9sh__navigation_menu_target: "item" }) do
+          if link?
+            link
+          else
+            safe_join([trigger, menu_content].compact)
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/m9sh/popover_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module M9sh
+  class PopoverComponent < BaseComponent
+    include Utilities
+
+    renders_one :trigger, lambda { |&block|
+      tag.div(
+        data: {
+          action: "click->m9sh--popover#toggle",
+          m9sh__popover_target: "trigger"
+        }
+      ) { block.call }
+    }
+
+    renders_one :popover_content, lambda { |&block|
+      tag.div(
+        class: "absolute z-50 w-72 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none hidden 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",
+        data: {
+          m9sh__popover_target: "content"
+        }
+      ) { block.call }
+    }
+
+    def initialize(align: "center", side: "bottom", **extra_attrs)
+      @align = align
+      @side = side
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        **component_attrs("relative inline-block"),
+        data: {
+          controller: "m9sh--popover",
+          m9sh__popover_align_value: @align,
+          m9sh__popover_side_value: @side
+        }
+      ) do
+        safe_join([
+          trigger,
+          popover_content
+        ].compact)
+      end
+    end
+  end
+end

data/app/components/m9sh/progress_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module M9sh
+  class ProgressComponent < BaseComponent
+    include Utilities
+
+    def initialize(value: 0, max: 100, **extra_attrs)
+      @value = value.to_f
+      @max = max.to_f
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        **component_attrs(base_classes),
+        role: "progressbar",
+        "aria-valuemin": "0",
+        "aria-valuemax": @max,
+        "aria-valuenow": @value,
+        data: { slot: "progress" }
+      ) do
+        tag.div(
+          class: indicator_classes,
+          style: "transform: translateX(-#{100 - percentage}%)",
+          data: { slot: "progress-indicator" }
+        )
+      end
+    end
+
+    private
+
+    def base_classes
+      "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full"
+    end
+
+    def indicator_classes
+      "bg-primary h-full w-full flex-1 transition-all"
+    end
+
+    def percentage
+      return 0 if @max.zero?
+
+      [(@value / @max * 100).round(2), 100].min
+    end
+  end
+end