m9sh 0.1.0 → 0.2.0

data/app/components/m9sh/navbar_component.rb

@@ -0,0 +1,186 @@
+# frozen_string_literal: true
+
+module M9sh
+  class NavbarComponent < BaseComponent
+    include Utilities
+
+    renders_one :brand
+    renders_one :navigation
+    renders_one :left_action
+    renders_one :right_action
+
+    def initialize(
+      sticky: true,
+      transparent: false,
+      container: true,
+      size: :default,
+      border: true,
+      blur: false,
+      class_name: nil,
+      **extra_attrs
+    )
+      @sticky = sticky
+      @transparent = transparent
+      @container = container
+      @size = size
+      @border = border
+      @blur = blur
+      @action_blocks = []
+      @mobile_menu_block = nil
+      super(class_name: class_name, **extra_attrs)
+    end
+
+    def with_actions(&block)
+      @action_blocks << block if block
+    end
+
+    def with_mobile_menu(&block)
+      @mobile_menu_block = block if block
+    end
+
+    def call
+      tag.header(
+        **component_attrs(header_classes),
+        role: "banner"
+      ) do
+        tag.div(class: container_classes) do
+          tag.div(class: content_classes) do
+            safe_join([
+              left_action,
+              render_brand_and_nav,
+              render_actions_with_mobile_menu
+            ].compact)
+          end
+        end
+      end
+    end
+
+    private
+
+    def header_classes
+      classes = ["w-full transition-colors"]
+      classes << "md:border-b md:border-border" if @border
+
+      # Add positioning classes
+      if @sticky
+        classes << "sticky top-0 z-50"
+      else
+        classes << "fixed top-0 left-0 right-0 z-50"
+      end
+
+      if @transparent
+        classes << "bg-transparent backdrop-blur-lg supports-[backdrop-filter]:bg-background/60"
+      elsif @blur
+        classes << "bg-transparent backdrop-blur-md"
+      else
+        classes << "bg-transparent"
+      end
+
+      classes.join(" ")
+    end
+
+    def container_classes
+      if @container
+        "container mx-auto px-4 sm:px-6 lg:px-8"
+      else
+        "w-full px-4 sm:px-6 lg:px-8"
+      end
+    end
+
+    def content_classes
+      height = case @size
+               when :sm then "h-12"
+               when :lg then "h-20"
+               else "h-16"
+               end
+
+      "flex #{height} items-center justify-between"
+    end
+
+    def render_brand_and_nav
+      tag.div(class: "flex items-center gap-6 lg:gap-8") do
+        safe_join([
+          brand,
+          navigation ? render_desktop_navigation : nil
+        ].compact)
+      end
+    end
+
+    def render_desktop_navigation
+      tag.div(class: "hidden md:flex") do
+        navigation.to_s.html_safe
+      end
+    end
+
+    def render_actions_with_mobile_menu
+      tag.div(class: "flex items-center gap-2") do
+        safe_join([
+          render_desktop_actions,
+          right_action,
+          render_mobile_menu_trigger
+        ].compact)
+      end
+    end
+
+    def render_desktop_actions
+      return nil if @action_blocks.empty?
+
+      tag.div(class: "hidden md:flex items-center gap-2") do
+        @action_blocks.each { |block| concat(view_context.capture(&block)) }
+        nil
+      end
+    end
+
+    def render_mobile_menu_trigger
+      return nil unless @mobile_menu_block
+
+      tag.div(
+        data: {
+          controller: "m9sh--dropdown-menu",
+          m9sh__dropdown_menu_align_value: "end",
+          m9sh__dropdown_menu_side_value: "bottom"
+        },
+        class: "md:hidden relative inline-block text-left"
+      ) do
+        safe_join([
+          render_mobile_menu_button,
+          render_mobile_menu_content
+        ])
+      end
+    end
+
+    def render_mobile_menu_button
+      render(M9sh::ButtonComponent.new(
+        variant: :ghost,
+        size: :icon,
+        type: "button",
+        data: {
+          action: "click->m9sh--dropdown-menu#toggle click@window->m9sh--dropdown-menu#hide",
+          m9sh__dropdown_menu_target: "trigger"
+        },
+        aria: { label: "Open menu" }
+      )) do
+        render(M9sh::IconComponent.new(name: "menu", size: "20"))
+      end
+    end
+
+    def render_mobile_menu_content
+      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 right-0 z-50 mt-2 w-[200px] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg hidden",
+        style: "position: absolute;"
+      ) do
+        view_context.capture(&@mobile_menu_block)
+      end
+    end
+
+  end
+end

data/app/components/m9sh/navigation_menu_component.rb

@@ -27,7 +27,7 @@ module M9sh
         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",
+          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 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",
@@ -66,7 +66,7 @@ module M9sh
           }
         ) 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",
+            class: "relative mt-1.5 overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-lg 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

data/app/components/m9sh/popover_component.rb

@@ -13,21 +13,26 @@ module M9sh
       ) { block.call }
     }
 
+    def initialize(align: "center", side: "bottom", width: "w-72", **extra_attrs)
+      @align = align
+      @side = side
+      @width = width
+      super(**extra_attrs)
+    end
+
+    def before_render
+      @popover_content_classes = "fixed z-[9999] #{@width} 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"
+    end
+
     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",
+        class: @popover_content_classes,
         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/app/components/m9sh/radio_group_component.rb

@@ -6,25 +6,48 @@ module M9sh
 
     renders_many :items, "ItemComponent"
 
-    def initialize(name:, **extra_attrs)
+    def initialize(name:, default_value: nil, **extra_attrs)
       @name = name
+      @default_value = default_value
       super(**extra_attrs)
     end
 
     def call
       tag.div(
         **component_attrs("grid gap-2"),
-        role: "radiogroup"
+        role: "radiogroup",
+        data: {
+          controller: "m9sh--radio-group",
+          m9sh__radio_group_name_value: @name,
+          m9sh__radio_group_default_value_value: @default_value
+        }
       ) do
-        safe_join(items)
+        if items.any?
+          safe_join(items)
+        else
+          content
+        end
       end
     end
 
+    # Helper method to create radio group items
+    def item(value:, id:, **extra_attrs)
+      ItemComponent.new(
+        value: value,
+        id: id,
+        name: @name,
+        checked: @default_value == value,
+        **extra_attrs
+      )
+    end
+
     class ItemComponent < BaseComponent
       include Utilities
 
-      def initialize(value:, label:, description: nil, checked: false, disabled: false, **extra_attrs)
+      def initialize(value:, id: nil, name: nil, label: nil, description: nil, checked: false, disabled: false, **extra_attrs)
         @value = value
+        @id = id || "radio-#{value}"
+        @name = name
         @label = label
         @description = description
         @checked = checked
@@ -33,13 +56,19 @@ module M9sh
       end
 
       def call
-        tag.div(
-          class: "flex items-center space-x-2"
-        ) do
-          safe_join([
-            render_radio,
-            render_label_and_description
-          ])
+        # If label and description are provided, render the full component
+        if @label || @description
+          tag.div(
+            class: "flex items-center space-x-2"
+          ) do
+            safe_join([
+              render_radio,
+              render_label_and_description
+            ])
+          end
+        else
+          # Otherwise just render the radio button
+          render_radio
         end
       end
 
@@ -47,13 +76,15 @@ module M9sh
 
       def render_radio
         tag.button(
+          **component_attrs(radio_classes),
           type: "button",
           role: "radio",
-          class: radio_classes,
+          id: @id,
           data: {
             controller: "m9sh--radio",
             m9sh__radio_value_value: @value,
             m9sh__radio_checked_value: @checked,
+            m9sh__radio_name_value: @name,
             action: "click->m9sh--radio#toggle"
           },
           aria: {
@@ -71,8 +102,9 @@ module M9sh
       def render_label_and_description
         tag.div(class: "grid gap-1.5 leading-none") do
           safe_join([
-            tag.label(
+            @label && tag.label(
               @label,
+              for: @id,
               class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
             ),
             @description && tag.p(@description, class: "text-sm text-muted-foreground")

data/app/components/m9sh/sheet_component.rb

@@ -47,7 +47,7 @@ module M9sh
 
     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",
+        class: "fixed inset-0 z-[100] 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__sheet_target: "overlay",
           action: "click->m9sh--sheet#close"
@@ -71,17 +71,17 @@ module M9sh
     end
 
     def panel_classes
-      base = "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 hidden"
+      base = "fixed z-[100] bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 hidden flex flex-col"
 
       case @side
       when "top"
-        "#{base} inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top"
+        "#{base} inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top"
       when "bottom"
-        "#{base} inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+        "#{base} inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
       when "left"
-        "#{base} inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm"
+        "#{base} inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm"
       when "right"
-        "#{base} inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+        "#{base} inset-y-0 right-0 h-full w-3/4 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-5xl"
       end
     end
 

data/app/components/m9sh/sidebar_component.rb

@@ -74,7 +74,12 @@ module M9sh
       when :icon
         "transition-all duration-300 data-[state=collapsed]:w-16"
       when :offcanvas
-        "fixed inset-y-0 z-50 transition-transform duration-300 data-[state=collapsed]:-translate-x-full"
+        # Fixed positioning only on mobile, flex layout on desktop
+        if @side == :left
+          "md:relative md:translate-x-0 fixed inset-y-0 z-50 transition-transform duration-300 data-[state=collapsed]:-translate-x-full data-[state=collapsed]:md:translate-x-0"
+        else
+          "md:relative md:translate-x-0 fixed inset-y-0 z-50 transition-transform duration-300 data-[state=collapsed]:translate-x-full data-[state=collapsed]:md:translate-x-0"
+        end
       else
         ""
       end

data/app/components/m9sh/skeleton_component.rb

@@ -11,12 +11,18 @@ module M9sh
 
     def call
       tag.div(
-        **component_attrs(class_names("animate-pulse bg-muted", rounded_classes))
+        **component_attrs(class_names("relative overflow-hidden", skeleton_classes, rounded_classes)),
+        style: "background-color: rgb(228 228 231); animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
       )
     end
 
     private
 
+    def skeleton_classes
+      # Add a shimmer effect using pseudo-element
+      "before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent"
+    end
+
     def rounded_classes
       case @rounded
       when :none then "rounded-none"

data/app/components/m9sh/tabs_component.rb

@@ -4,7 +4,8 @@ module M9sh
   class TabsComponent < BaseComponent
     include Utilities
 
-    renders_many :tabs, "TabComponent"
+    renders_one :tabs_list, "TabsListComponent"
+    renders_many :tabs_contents, "TabsContentComponent"
 
     def initialize(default_value: nil, **extra_attrs)
       @default_value = default_value
@@ -13,80 +14,107 @@ module M9sh
 
     def call
       tag.div(
-        **component_attrs(base_classes),
+        **component_attrs("w-full"),
         data: {
           controller: "m9sh--tabs",
           m9sh__tabs_default_value: @default_value
         }
       ) do
         safe_join([
-          render_tab_list,
-          render_tab_panels
-        ])
+          tabs_list,
+          safe_join(tabs_contents)
+        ].compact)
       end
     end
 
-    private
+    # Nested TabsList component
+    class TabsListComponent < BaseComponent
+      include Utilities
 
-    def base_classes
-      "w-full"
-    end
+      renders_many :triggers, "TabsTriggerComponent"
 
-    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|
+      def initialize(**extra_attrs)
+        super(**extra_attrs)
+      end
+
+      def call
+        tag.div(
+          **component_attrs("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
+          if triggers.any?
+            safe_join(triggers)
+          else
+            content
+          end
+        end
+      end
+
+      # Helper method to create trigger
+      def tabs_trigger(value:, **extra_attrs, &block)
+        TabsTriggerComponent.new(value: value, **extra_attrs).tap do |trigger|
+          trigger.instance_variable_set(:@content_block, block)
+        end
+      end
+
+      # Nested TabsTrigger component
+      class TabsTriggerComponent < BaseComponent
+        include Utilities
+
+        def initialize(value:, **extra_attrs)
+          @value = value
+          super(**extra_attrs)
+        end
+
+        def call
           tag.button(
-            tab.label,
+            **component_attrs(trigger_classes),
             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
+              value: @value
+            }
+          ) do
+            if @content_block
+              @content_block.call
+            else
+              content
+            end
+          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
+        private
+
+        def trigger_classes
+          "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"
+        end
       end
     end
 
-    class TabComponent < BaseComponent
-      attr_reader :value, :label
-
-      renders_one :panel
+    # Nested TabsContent component
+    class TabsContentComponent < BaseComponent
+      include Utilities
 
-      def initialize(value:, label:, **extra_attrs)
+      def initialize(value:, **extra_attrs)
         @value = value
-        @label = label
         super(**extra_attrs)
       end
 
       def call
-        # Tabs are rendered by parent component
-        nil
+        tag.div(
+          **component_attrs("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"),
+          role: "tabpanel",
+          data: {
+            m9sh__tabs_target: "panel",
+            value: @value
+          }
+        ) do
+          content
+        end
       end
     end
   end
-end
+end

data/app/components/m9sh/textarea_component.rb

@@ -38,7 +38,7 @@ module M9sh
     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"
+      "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base text-foreground ring-offset-background 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/theme_toggle_component.rb

@@ -31,6 +31,7 @@ module M9sh
 
     def button_classes
       cn(
+        "relative",
         "inline-flex items-center justify-center",
         "rounded-md text-sm font-medium",
         "h-9 w-9",