m9sh 0.1.0

data/app/components/m9sh/slider_component.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+module M9sh
+  class SliderComponent < BaseComponent
+    include Utilities
+
+    def initialize(min: 0, max: 100, step: 1, value: 50, name: nil, **extra_attrs)
+      @min = min
+      @max = max
+      @step = step
+      @value = value
+      @name = name
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        **component_attrs("relative flex w-full touch-none select-none items-center"),
+        data: {
+          controller: "m9sh--slider",
+          m9sh__slider_min_value: @min,
+          m9sh__slider_max_value: @max,
+          m9sh__slider_step_value: @step,
+          m9sh__slider_value_value: @value
+        }
+      ) do
+        safe_join([
+          render_track,
+          render_range,
+          render_thumb,
+          render_hidden_input
+        ])
+      end
+    end
+
+    private
+
+    def render_track
+      tag.span(
+        class: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary",
+        data: {
+          m9sh__slider_target: "track",
+          action: "click->m9sh--slider#handleTrackClick"
+        }
+      )
+    end
+
+    def render_range
+      tag.span(
+        class: "absolute h-full bg-primary",
+        data: { m9sh__slider_target: "range" }
+      )
+    end
+
+    def render_thumb
+      tag.span(
+        class: "block h-5 w-5 rounded-full border-2 border-primary bg-background 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 cursor-pointer absolute top-1/2 -translate-y-1/2 -translate-x-1/2",
+        data: {
+          m9sh__slider_target: "thumb",
+          action: "mousedown->m9sh--slider#startDrag touchstart->m9sh--slider#startDrag"
+        },
+        tabindex: "0",
+        role: "slider",
+        aria: {
+          valuenow: @value,
+          valuemin: @min,
+          valuemax: @max
+        }
+      )
+    end
+
+    def render_hidden_input
+      return unless @name
+
+      tag.input(
+        type: "hidden",
+        name: @name,
+        value: @value,
+        data: { m9sh__slider_target: "input" }
+      )
+    end
+  end
+end

data/app/components/m9sh/spinner_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module M9sh
+  class SpinnerComponent < BaseComponent
+    include Utilities
+
+    SIZES = {
+      sm: "size-3",
+      default: "size-4",
+      md: "size-6",
+      lg: "size-8"
+    }.freeze
+
+    def initialize(size: :default, **extra_attrs)
+      @size = size
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.svg(
+        **component_attrs(class_names("animate-spin", size_classes)),
+        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",
+        role: "status",
+        aria: { label: "Loading" }
+      ) do
+        safe_join([
+          tag.path(d: "M21 12a9 9 0 1 1-6.219-8.56")
+        ])
+      end
+    end
+
+    private
+
+    def size_classes
+      SIZES[@size] || SIZES[:default]
+    end
+  end
+end

data/app/components/m9sh/switch_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module M9sh
+  class SwitchComponent < BaseComponent
+    include Utilities
+
+    def initialize(name: nil, checked: false, disabled: false, **extra_attrs)
+      @name = name
+      @checked = checked
+      @disabled = disabled
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.button(
+        **component_attrs(base_classes),
+        type: "button",
+        role: "switch",
+        "aria-checked": @checked.to_s,
+        data: {
+          controller: "m9sh--switch",
+          action: "click->m9sh--switch#toggle",
+          m9sh__switch_checked_value: @checked.to_s
+        },
+        disabled: @disabled
+      ) do
+        tag.span(
+          class: thumb_classes,
+          data: { m9sh__switch_target: "thumb" }
+        )
+      end
+    end
+
+    private
+
+    def base_classes
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"
+    end
+
+    def thumb_classes
+      cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
+        @checked ? "translate-x-4" : "translate-x-0"
+      )
+    end
+  end
+end

data/app/components/m9sh/table_component.rb

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+module M9sh
+  class TableComponent < BaseComponent
+    include Utilities
+
+    renders_one :header, "M9sh::TableComponent::HeaderComponent"
+    renders_one :body, "M9sh::TableComponent::BodyComponent"
+    renders_one :footer, "M9sh::TableComponent::FooterComponent"
+    renders_one :caption, "M9sh::TableComponent::CaptionComponent"
+
+    def call
+      tag.div(
+        class: "relative w-full overflow-auto"
+      ) do
+        tag.table(
+          **component_attrs("w-full caption-bottom text-sm")
+        ) do
+          concat(header) if header?
+          concat(body) if body?
+          concat(footer) if footer?
+          concat(caption) if caption?
+        end
+      end
+    end
+
+    class HeaderComponent < BaseComponent
+      include Utilities
+
+      def call
+        tag.thead(
+          **component_attrs("[&_tr]:border-b")
+        ) do
+          content
+        end
+      end
+    end
+
+    class BodyComponent < BaseComponent
+      include Utilities
+
+      def call
+        tag.tbody(
+          **component_attrs("[&_tr:last-child]:border-0")
+        ) do
+          content
+        end
+      end
+    end
+
+    class FooterComponent < BaseComponent
+      include Utilities
+
+      def call
+        tag.tfoot(
+          **component_attrs("border-t bg-muted font-medium [&>tr]:last:border-b-0")
+        ) do
+          content
+        end
+      end
+    end
+
+    class RowComponent < BaseComponent
+      include Utilities
+
+      def call
+        tag.tr(
+          **component_attrs("border-b transition-colors hover:bg-muted data-[state=selected]:bg-muted")
+        ) do
+          content
+        end
+      end
+    end
+
+    class HeadComponent < BaseComponent
+      include Utilities
+
+      def call
+        tag.th(
+          **component_attrs("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0")
+        ) do
+          content
+        end
+      end
+    end
+
+    class CellComponent < BaseComponent
+      include Utilities
+
+      def call
+        tag.td(
+          **component_attrs("p-4 align-middle [&:has([role=checkbox])]:pr-0")
+        ) do
+          content
+        end
+      end
+    end
+
+    class CaptionComponent < BaseComponent
+      include Utilities
+
+      def call
+        tag.caption(
+          **component_attrs("mt-4 text-sm text-muted-foreground")
+        ) do
+          content
+        end
+      end
+    end
+  end
+end

data/app/components/m9sh/tabs_component.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module M9sh
+  class TabsComponent < BaseComponent
+    include Utilities
+
+    renders_many :tabs, "TabComponent"
+
+    def initialize(default_value: nil, **extra_attrs)
+      @default_value = default_value
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        **component_attrs(base_classes),
+        data: {
+          controller: "m9sh--tabs",
+          m9sh__tabs_default_value: @default_value
+        }
+      ) do
+        safe_join([
+          render_tab_list,
+          render_tab_panels
+        ])
+      end
+    end
+
+    private
+
+    def base_classes
+      "w-full"
+    end
+
+    def render_tab_list
+      tag.div(
+        class: "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        role: "tablist",
+        data: { m9sh__tabs_target: "list" }
+      ) do
+        tabs.each_with_index.map do |tab, index|
+          tag.button(
+            tab.label,
+            type: "button",
+            role: "tab",
+            class: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+            data: {
+              m9sh__tabs_target: "trigger",
+              action: "click->m9sh--tabs#selectTab",
+              value: tab.value
+            },
+            "aria-selected": @default_value == tab.value ? "true" : "false"
+          )
+        end.join.html_safe
+      end
+    end
+
+    def render_tab_panels
+      tag.div(class: "mt-2") do
+        tabs.map do |tab|
+          tag.div(
+            tab.panel,
+            role: "tabpanel",
+            class: "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            data: {
+              m9sh__tabs_target: "panel",
+              value: tab.value
+            },
+            style: @default_value == tab.value ? "" : "display: none;"
+          )
+        end.join.html_safe
+      end
+    end
+
+    class TabComponent < BaseComponent
+      attr_reader :value, :label
+
+      renders_one :panel
+
+      def initialize(value:, label:, **extra_attrs)
+        @value = value
+        @label = label
+        super(**extra_attrs)
+      end
+
+      def call
+        # Tabs are rendered by parent component
+        nil
+      end
+    end
+  end
+end

data/app/components/m9sh/textarea_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module M9sh
+  class TextareaComponent < BaseComponent
+    include Utilities
+
+    def initialize(
+      name: nil,
+      value: nil,
+      placeholder: nil,
+      rows: 3,
+      disabled: false,
+      readonly: false,
+      **extra_attrs
+    )
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @rows = rows
+      @disabled = disabled
+      @readonly = readonly
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.textarea(
+        @value,
+        **component_attrs(base_classes),
+        name: @name,
+        placeholder: @placeholder,
+        rows: @rows,
+        disabled: @disabled,
+        readonly: @readonly,
+        data: { slot: "textarea" }
+      )
+    end
+
+    private
+
+    def base_classes
+      "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base text-foreground shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+    end
+  end
+end

data/app/components/m9sh/theme_toggle_component.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module M9sh
+  class ThemeToggleComponent < BaseComponent
+    include Utilities
+
+    def initialize(**extra_attrs)
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        **component_attrs("inline-flex items-center gap-2"),
+        data: { controller: "m9sh--theme" }
+      ) do
+        tag.button(
+          class: button_classes,
+          data: { action: "click->m9sh--theme#toggle" },
+          aria: { label: "Toggle theme" }
+        ) do
+          safe_join([
+            sun_icon,
+            moon_icon,
+            tag.span("Toggle theme", class: "sr-only")
+          ])
+        end
+      end
+    end
+
+    private
+
+    def button_classes
+      cn(
+        "inline-flex items-center justify-center",
+        "rounded-md text-sm font-medium",
+        "h-9 w-9",
+        "border border-input bg-background",
+        "hover:bg-accent hover:text-accent-foreground",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        "transition-colors"
+      )
+    end
+
+    def sun_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 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+      ) do
+        safe_join([
+          tag.circle(cx: "12", cy: "12", r: "4"),
+          tag.path(d: "M12 2v2"),
+          tag.path(d: "M12 20v2"),
+          tag.path(d: "m4.93 4.93 1.41 1.41"),
+          tag.path(d: "m17.66 17.66 1.41 1.41"),
+          tag.path(d: "M2 12h2"),
+          tag.path(d: "M20 12h2"),
+          tag.path(d: "m6.34 17.66-1.41 1.41"),
+          tag.path(d: "m19.07 4.93-1.41 1.41")
+        ])
+      end
+    end
+
+    def moon_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: "absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+      ) do
+        tag.path(d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z")
+      end
+    end
+  end
+end

data/app/components/m9sh/toast_component.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module M9sh
+  class ToastComponent < BaseComponent
+    attr_reader :variant, :title, :description, :duration
+
+    VARIANTS = {
+      default: "bg-background text-foreground border",
+      success: "bg-green-50 text-green-900 border",
+      error: "bg-red-50 text-red-900 border",
+      warning: "bg-yellow-50 text-yellow-900 border",
+      info: "bg-blue-50 text-blue-900 border"
+    }.freeze
+
+    def initialize(title:, description: nil, variant: :default, duration: 5000, **extra_attrs)
+      @title = title
+      @description = description
+      @variant = variant.to_sym
+      @duration = duration
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(
+        data: {
+          controller: "m9sh--toast",
+          m9sh__toast_duration_value: duration,
+          transition_enter: "transition ease-out duration-300",
+          transition_enter_start: "transform translate-x-full opacity-0",
+          transition_enter_end: "transform translate-x-0 opacity-100",
+          transition_leave: "transition ease-in duration-200",
+          transition_leave_start: "transform translate-x-0 opacity-100",
+          transition_leave_end: "transform translate-x-full opacity-0"
+        },
+        class: "pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 #{variant_classes}",
+        **(@extra_attrs || {})
+      ) do
+        tag.div(class: "p-4") do
+          safe_join([
+            title_element,
+            description_element,
+            close_button
+          ].compact)
+        end
+      end
+    end
+
+    private
+
+    def variant_classes
+      VARIANTS[@variant] || VARIANTS[:default]
+    end
+
+    def title_element
+      return unless title
+
+      tag.p(class: "text-sm font-semibold") { title }
+    end
+
+    def description_element
+      return unless description
+
+      tag.p(class: "mt-1 text-sm opacity-90") { description }
+    end
+
+    def close_button
+      tag.button(
+        type: "button",
+        data: { action: "click->m9sh--toast#close" },
+        class: "absolute top-2 right-2 inline-flex rounded-md p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-300"
+      ) do
+        tag.span(class: "sr-only") { "Dismiss" }
+        tag.svg(
+          class: "h-5 w-5",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 20 20",
+          fill: "currentColor"
+        ) do
+          tag.path(
+            d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/m9sh/toaster_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module M9sh
+  class ToasterComponent < BaseComponent
+    def call
+      tag.div(
+        id: "toast-container",
+        data: { controller: "m9sh--toaster" },
+        class: "fixed inset-0 z-50 pointer-events-none",
+        "aria-live": "polite",
+        **(@extra_attrs || {})
+      ) do
+        tag.div(
+          class: "fixed bottom-0 right-0 flex flex-col gap-2 p-4 sm:bottom-4 sm:right-4 sm:flex-col sm:items-end",
+          data: { m9sh__toaster_target: "container" }
+        )
+      end
+    end
+  end
+end

data/app/components/m9sh/toggle_component.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module M9sh
+  class ToggleComponent < BaseComponent
+    include Utilities
+
+    VARIANTS = {
+      default: "bg-transparent",
+      outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+    }.freeze
+
+    SIZES = {
+      sm: "h-8 px-1.5 min-w-8",
+      default: "h-9 px-2 min-w-9",
+      lg: "h-10 px-2.5 min-w-10"
+    }.freeze
+
+    def initialize(
+      variant: :default,
+      size: :default,
+      pressed: false,
+      disabled: false,
+      **extra_attrs
+    )
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @pressed = pressed
+      @disabled = disabled
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.button(
+        content,
+        **component_attrs(class_names(base_classes, variant_classes, size_classes)),
+        type: "button",
+        role: "button",
+        "aria-pressed": @pressed.to_s,
+        disabled: @disabled,
+        data: {
+          slot: "toggle",
+          state: @pressed ? "on" : "off",
+          controller: "m9sh--toggle",
+          action: "click->m9sh--toggle#toggle",
+          m9sh__toggle_pressed_value: @pressed.to_s
+        }
+      )
+    end
+
+    private
+
+    def base_classes
+      "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap"
+    end
+
+    def variant_classes
+      VARIANTS[@variant] || VARIANTS[:default]
+    end
+
+    def size_classes
+      SIZES[@size] || SIZES[:default]
+    end
+  end
+end