m9sh 0.1.0

data/app/components/m9sh/accordion_component.rb

@@ -0,0 +1,122 @@
+# frozen_string_literal: true
+
+module M9sh
+  class AccordionComponent < BaseComponent
+    include Utilities
+
+    renders_many :items, "ItemComponent"
+
+    def initialize(type: "single", collapsible: true, default_value: nil, **extra_attrs)
+      @type = type
+      @collapsible = collapsible
+      @default_value = default_value
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        class: cn("w-full", @class_name),
+        data: {
+          controller: "m9sh--accordion",
+          m9sh__accordion_type_value: @type,
+          m9sh__accordion_collapsible_value: @collapsible,
+          m9sh__accordion_default_value: @default_value
+        }.merge(@extra_attrs.fetch(:data, {}))
+      ) do
+        safe_join(items)
+      end
+    end
+
+    class ItemComponent < BaseComponent
+      include Utilities
+
+      renders_one :trigger
+      renders_one :body
+
+      def initialize(value:, **extra_attrs)
+        @value = value
+        super(**extra_attrs)
+      end
+
+      def call
+        tag.div(
+          **component_attrs(item_classes),
+          data: {
+            m9sh__accordion_target: "item",
+            value: @value
+          }
+        ) do
+          safe_join([
+            render_trigger,
+            render_content
+          ])
+        end
+      end
+
+      private
+
+      def item_classes
+        "border-b"
+      end
+
+      def render_trigger
+        return "" unless trigger
+
+        tag.h3(class: "flex", data: { m9sh__accordion_target: "trigger" }) do
+          tag.button(
+            class: trigger_classes,
+            type: "button",
+            data: {
+              action: "click->m9sh--accordion#toggle",
+              m9sh__accordion_target: "button"
+            }
+          ) do
+            safe_join([
+              tag.span(trigger),
+              chevron_icon
+            ])
+          end
+        end
+      end
+
+      def render_content
+        return "" unless body
+
+        tag.div(
+          class: content_classes,
+          data: {
+            m9sh__accordion_target: "content"
+          },
+          style: "height: 0; display: block;"
+        ) do
+          tag.div(body, class: "pb-4 pt-0")
+        end
+      end
+
+      def trigger_classes
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[aria-expanded=true]>svg]:rotate-180"
+      end
+
+      def content_classes
+        "overflow-hidden text-sm transition-all duration-300 ease-in-out"
+      end
+
+      def chevron_icon
+        tag.svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "h-4 w-4 shrink-0 transition-transform duration-200"
+        ) do
+          tag.path(d: "m6 9 6 6 6-6")
+        end
+      end
+    end
+  end
+end

data/app/components/m9sh/alert_component.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module M9sh
+  class AlertComponent < BaseComponent
+    include Utilities
+
+    VARIANTS = {
+      default: "bg-card text-card-foreground",
+      destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+    }.freeze
+
+    renders_one :icon
+    renders_one :title
+    renders_one :description
+
+    def initialize(variant: :default, **extra_attrs)
+      @variant = variant.to_sym
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        **component_attrs(class_names(base_classes, variant_classes)),
+        role: "alert",
+        data: { slot: "alert" }
+      ) do
+        safe_join([
+          render_icon,
+          render_title,
+          render_description,
+          content
+        ].compact)
+      end
+    end
+
+    private
+
+    def base_classes
+      "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[1rem_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
+    end
+
+    def variant_classes
+      VARIANTS[@variant] || VARIANTS[:default]
+    end
+
+    def render_icon
+      return unless icon?
+
+      tag.div(class: "col-start-1") { icon }
+    end
+
+    def render_title
+      return unless title?
+
+      tag.div(
+        title,
+        class: "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight text-foreground",
+        data: { slot: "alert-title" }
+      )
+    end
+
+    def render_description
+      return unless description?
+
+      tag.div(
+        description,
+        class: "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        data: { slot: "alert-description" }
+      )
+    end
+  end
+end

data/app/components/m9sh/alert_dialog_component.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module M9sh
+  class AlertDialogComponent < BaseComponent
+    include Utilities
+
+    renders_one :trigger, lambda { |&block|
+      tag.div(
+        data: { action: "click->m9sh--alert-dialog#open" }
+      ) { block.call }
+    }
+
+    renders_one :title, lambda { |&block|
+      tag.h2(class: "text-lg font-semibold") { block.call }
+    }
+
+    renders_one :description, lambda { |&block|
+      tag.p(class: "text-sm text-muted-foreground") { block.call }
+    }
+
+    renders_one :alert_content, lambda { |&block|
+      tag.div { block.call }
+    }
+
+    renders_one :footer, lambda { |&block|
+      tag.div(
+        class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
+      ) { block.call }
+    }
+
+    def initialize(**extra_attrs)
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        **component_attrs(""),
+        data: { controller: "m9sh--alert-dialog" }
+      ) do
+        safe_join([
+          trigger,
+          render_overlay,
+          render_dialog_content
+        ].compact)
+      end
+    end
+
+    private
+
+    def render_overlay
+      tag.div(
+        class: "fixed inset-0 z-50 bg-black/50 hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        data: {
+          m9sh__alert_dialog_target: "overlay",
+          action: "click->m9sh--alert-dialog#close"
+        }
+      )
+    end
+
+    def render_dialog_content
+      tag.div(
+        class: dialog_content_classes,
+        data: {
+          m9sh__alert_dialog_target: "content",
+          action: "click->m9sh--alert-dialog#stopPropagation"
+        },
+        role: "alertdialog"
+      ) do
+        safe_join([
+          render_header,
+          render_body,
+          render_footer_section
+        ].compact)
+      end
+    end
+
+    def dialog_content_classes
+      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 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-[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
+
+    def render_header
+      return unless title? || description?
+
+      tag.div(class: "flex flex-col space-y-2 text-center sm:text-left") do
+        safe_join([
+          title,
+          description
+        ].compact)
+      end
+    end
+
+    def render_body
+      alert_content
+    end
+
+    def render_footer_section
+      footer
+    end
+  end
+end

data/app/components/m9sh/avatar_component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module M9sh
+  class AvatarComponent < BaseComponent
+    include Utilities
+
+    def initialize(src: nil, alt: nil, fallback: nil, size: :md, **extra_attrs)
+      @src = src
+      @alt = alt
+      @fallback = fallback
+      @size = size.to_sym
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        **component_attrs(class_names(base_classes, size_classes)),
+        data: { slot: "avatar" }
+      ) do
+        safe_join([
+          render_image,
+          render_fallback
+        ].compact)
+      end
+    end
+
+    private
+
+    SIZES = {
+      sm: "size-6",
+      md: "size-8",
+      lg: "size-10",
+      xl: "size-12"
+    }.freeze
+
+    def base_classes
+      "relative flex shrink-0 overflow-hidden rounded-full"
+    end
+
+    def size_classes
+      SIZES[@size] || SIZES[:md]
+    end
+
+    def render_image
+      return unless @src
+
+      tag.img(
+        src: @src,
+        alt: @alt || "",
+        class: "aspect-square size-full object-cover",
+        data: { slot: "avatar-image" }
+      )
+    end
+
+    def render_fallback
+      return unless @fallback
+
+      tag.div(
+        @fallback,
+        class: "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm font-medium",
+        data: { slot: "avatar-fallback" }
+      )
+    end
+  end
+end

data/app/components/m9sh/badge_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module M9sh
+  class BadgeComponent < BaseComponent
+    include Utilities
+
+    VARIANTS = {
+      default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+      secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+      outline: "border-border text-foreground",
+      success: "border-transparent bg-green-500/10 text-green-700 hover:bg-green-500/20 dark:text-green-400",
+      warning: "border-transparent bg-amber-500/10 text-amber-700 hover:bg-amber-500/20 dark:text-amber-400"
+    }.freeze
+
+    def initialize(variant: :default, **extra_attrs)
+      @variant = variant.to_sym
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.span(
+        **component_attrs(class_names(base_classes, variant_classes))
+      ) { content }
+    end
+
+    private
+
+    def base_classes
+      "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+    end
+
+    def variant_classes
+      VARIANTS[@variant] || VARIANTS[:default]
+    end
+  end
+end

data/app/components/m9sh/base_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module M9sh
+  class BaseComponent < ViewComponent::Base
+    def initialize(class_name: nil, **extra_attrs)
+      @class_name = class_name
+      @extra_attrs = extra_attrs
+    end
+
+    private
+
+    def class_names(*args)
+      args.compact.join(" ")
+    end
+
+    def component_attrs(default_classes, custom_classes = nil)
+      classes = class_names(default_classes, custom_classes, @class_name)
+      @extra_attrs.merge(class: classes)
+    end
+  end
+end

data/app/components/m9sh/breadcrumb_component.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module M9sh
+  class BreadcrumbComponent < BaseComponent
+    include Utilities
+
+    renders_many :items, "ItemComponent"
+
+    def call
+      tag.nav(
+        **component_attrs(""),
+        "aria-label": "breadcrumb",
+        data: { slot: "breadcrumb" }
+      ) do
+        tag.ol(
+          class: "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+          data: { slot: "breadcrumb-list" }
+        ) do
+          safe_join(items.map(&:to_s))
+        end
+      end
+    end
+
+    class ItemComponent < BaseComponent
+      include Utilities
+
+      renders_one :link
+      renders_one :page
+
+      def initialize(current: false, **extra_attrs)
+        @current = current
+        super(**extra_attrs)
+      end
+
+      def call
+        tag.li(
+          **component_attrs("inline-flex items-center gap-1.5"),
+          data: { slot: "breadcrumb-item" }
+        ) do
+          safe_join([
+            render_content,
+            render_separator
+          ].compact)
+        end
+      end
+
+      private
+
+      def render_content
+        if @current
+          tag.span(
+            page || content,
+            class: "text-foreground font-normal",
+            role: "link",
+            "aria-disabled": "true",
+            "aria-current": "page",
+            data: { slot: "breadcrumb-page" }
+          )
+        elsif link?
+          tag.a(
+            link,
+            class: "hover:text-foreground transition-colors",
+            data: { slot: "breadcrumb-link" }
+          )
+        else
+          content
+        end
+      end
+
+      def render_separator
+        return if @current
+
+        tag.li(
+          role: "presentation",
+          "aria-hidden": "true",
+          class: "[&>svg]:size-3.5",
+          data: { slot: "breadcrumb-separator" }
+        ) do
+          chevron_right_icon
+        end
+      end
+
+      def chevron_right_icon
+        tag.svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round"
+        ) do
+          tag.polyline(points: "9 18 15 12 9 6")
+        end
+      end
+    end
+  end
+end

data/app/components/m9sh/button_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module M9sh
+  class ButtonComponent < BaseComponent
+    include Utilities
+
+    VARIANTS = {
+      default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+      destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+      outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+      secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground",
+      link: "text-primary underline-offset-4 hover:underline"
+    }.freeze
+
+    SIZES = {
+      default: "h-10 px-4 py-2",
+      sm: "h-9 rounded-md px-3",
+      lg: "h-11 rounded-md px-8",
+      icon: "h-10 w-10"
+    }.freeze
+
+    def initialize(variant: :default, size: :default, type: "button", disabled: false, **extra_attrs)
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @type = type
+      @disabled = disabled
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.button(
+        content,
+        **component_attrs(class_names(base_classes, variant_classes, size_classes)),
+        type: @type,
+        disabled: @disabled
+      )
+    end
+
+    private
+
+    def base_classes
+      "inline-flex items-center justify-center gap-2 whitespace-nowrap 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+    end
+
+    def variant_classes
+      VARIANTS[@variant] || VARIANTS[:default]
+    end
+
+    def size_classes
+      SIZES[@size] || SIZES[:md]
+    end
+  end
+end

data/app/components/m9sh/card_component.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module M9sh
+  class CardComponent < BaseComponent
+    include Utilities
+
+    renders_one :header, "HeaderComponent"
+    renders_one :footer, lambda { |&block|
+      tag.div(
+        class: "flex items-center px-6 [.border-t]:pt-6",
+        data: { slot: "card-footer" }
+      ) { block.call }
+    }
+    renders_one :body, lambda { |&block|
+      tag.div(
+        class: "px-6",
+        data: { slot: "card-content" }
+      ) { block.call }
+    }
+
+    def initialize(**extra_attrs)
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        **component_attrs(base_classes),
+        data: { slot: "card" }
+      ) do
+        safe_join([
+          header,
+          body,
+          footer
+        ].compact)
+      end
+    end
+
+    private
+
+    def base_classes
+      "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-border py-6 shadow-sm transition-all duration-200 hover:border-primary/30 hover:shadow-lg dark:hover:shadow-black/20"
+    end
+
+    class HeaderComponent < BaseComponent
+      include Utilities
+
+      renders_one :title, lambda { |**attrs, &block|
+        extra_class = attrs[:class] || ""
+        tag.div(
+          class: "text-lg font-semibold tracking-tight col-start-1 row-start-1 #{extra_class}",
+          data: { slot: "card-title" }
+        ) { block.call }
+      }
+      renders_one :description, lambda { |**attrs, &block|
+        extra_class = attrs[:class] || ""
+        tag.div(
+          class: "text-muted-foreground text-sm col-start-1 row-start-2 #{extra_class}",
+          data: { slot: "card-description" }
+        ) { block.call }
+      }
+      renders_one :action, lambda { |**attrs, &block|
+        extra_class = attrs[:class] || ""
+        tag.div(
+          class: "col-start-2 row-span-2 row-start-1 self-start justify-self-end #{extra_class}",
+          data: { slot: "card-action" }
+        ) { block.call }
+      }
+
+      def call
+        tag.div(
+          **component_attrs(header_classes),
+          data: { slot: "card-header" }
+        ) do
+          safe_join([
+            title,
+            description,
+            action,
+            content
+          ].compact)
+        end
+      end
+
+      private
+
+      def header_classes
+        "grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[>[data-slot=card-action]]:grid-cols-[1fr_auto] [.border-b]:pb-6"
+      end
+    end
+  end
+end

data/app/components/m9sh/checkbox_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module M9sh
+  class CheckboxComponent < BaseComponent
+    include Utilities
+
+    def initialize(name: nil, checked: false, value: "1", disabled: false, **extra_attrs)
+      @name = name
+      @checked = checked
+      @value = value
+      @disabled = disabled
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.input(
+        **component_attrs(base_classes),
+        type: "checkbox",
+        name: @name,
+        value: @value,
+        checked: @checked,
+        disabled: @disabled,
+        data: {
+          controller: "m9sh--checkbox",
+          action: "change->m9sh--checkbox#toggle"
+        }
+      )
+    end
+
+    private
+
+    def base_classes
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+    end
+  end
+end