kozenet_ui 0.1.0

data/app/components/kozenet_ui/button_component.rb

@@ -0,0 +1,156 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  # Apple-inspired button component with smooth interactions
+  # Supports multiple variants, sizes, and states
+  #
+  # @example Basic usage
+  #   <%= render KozenetUi::ButtonComponent.new(variant: :primary) do %>
+  #     Click me
+  #   <% end %>
+  #
+  # @example With helper
+  #   <%= kz_button(variant: :primary, size: :lg) { "Sign up" } %>
+  #
+  # @example With icon slot
+  #   <%= kz_button(variant: :secondary) do |button| %>
+  #     <% button.with_icon do %>
+  #       <svg>...</svg>
+  #     <% end %>
+  #     Save changes
+  #   <% end %>
+  #
+  # @example As link
+  #   <%= kz_button(variant: :ghost, href: "/path") { "Learn more" } %>
+  #
+  # @example Loading state
+  #   <%= kz_button(variant: :primary, loading: true) { "Processing..." } %>
+  # rubocop:disable Metrics/ClassLength
+  class ButtonComponent < BaseComponent
+    renders_one :icon
+
+    # rubocop:disable Metrics/ParameterLists
+    def initialize(
+      variant: :primary,
+      size: :md,
+      type: :button,
+      href: nil,
+      disabled: false,
+      loading: false,
+      full_width: false,
+      html_options: {}
+    )
+      super(variant: variant, size: size, **html_options)
+      @type = type
+      @href = href
+      @disabled = disabled
+      @loading = loading
+      @full_width = full_width
+    end
+    # rubocop:enable Metrics/ParameterLists
+
+    def call
+      if link?
+        link_tag
+      else
+        button_tag
+      end
+    end
+
+    private
+
+    def base_classes
+      classes = [
+        "kz-btn",
+        "inline-flex items-center justify-center gap-2",
+        "font-medium transition-all duration-200",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
+      ]
+
+      classes << "w-full" if @full_width
+      classes.join(" ")
+    end
+
+    def link?
+      @href.present?
+    end
+
+    def button_tag
+      tag.button(**button_attrs) do
+        button_content
+      end
+    end
+
+    def link_tag
+      tag.a(**link_attrs) do
+        button_content
+      end
+    end
+
+    def button_content
+      safe_join([
+        icon_or_spinner,
+        content_wrapper
+      ].compact)
+    end
+
+    def icon_or_spinner
+      if loading?
+        spinner_icon
+      elsif icon?
+        tag.span(class: "kz-btn-icon") { icon }
+      end
+    end
+
+    # rubocop:disable Metrics/MethodLength
+    def spinner_icon
+      tag.svg(
+        class: "kz-btn-spinner animate-spin",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "3",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do
+        tag.path(d: "M21 12a9 9 0 1 1-6.219-8.56")
+      end
+    end
+    # rubocop:enable Metrics/MethodLength
+
+    def content_wrapper
+      tag.span(class: "kz-btn-content") { content }
+    end
+
+    def button_attrs
+      attrs = html_attrs
+      attrs[:type] = @type.to_s
+      attrs[:disabled] = true if disabled?
+      attrs[:"aria-busy"] = "true" if loading?
+      attrs[:"aria-disabled"] = "true" if disabled?
+      attrs
+    end
+
+    def link_attrs
+      attrs = html_attrs
+      attrs[:href] = @href
+      attrs[:role] = "button"
+      attrs[:"aria-busy"] = "true" if loading?
+      attrs[:"aria-disabled"] = "true" if disabled?
+      attrs[:class] = [attrs[:class], "pointer-events-none"].join(" ") if disabled?
+      attrs
+    end
+
+    def disabled?
+      @disabled || @loading
+    end
+
+    def loading?
+      @loading
+    end
+  end
+  # rubocop:enable Metrics/ClassLength
+end

data/app/components/kozenet_ui/header_component/action_button_component.html.erb

@@ -0,0 +1,11 @@
+<%# frozen_string_literal: true %>
+<%# ActionButtonComponent template for KozenetUi::HeaderComponent %>
+<%= tag.a href: @href, class: "kz-action-btn", aria: { label: @label } do %>
+  <% if @icon %>
+    <span class="kz-action-btn-icon"><%= render_icon(@icon) %></span>
+  <% end %>
+  <% if @label %>
+    <span class="kz-action-btn-label"><%= @label %></span>
+  <% end %>
+  <%= content if content.present? %>
+<% end %>

data/app/components/kozenet_ui/header_component/action_button_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  class HeaderComponent < BaseComponent
+    # ActionButton section for the HeaderComponent
+    # Renders an action button (icon or text) in the header
+    #
+    # @example
+    #   <%= render KozenetUi::HeaderComponent::ActionButtonComponent.new(href: "/cart", icon: :cart, label: "Cart") %>
+    class ActionButtonComponent < BaseComponent
+      def initialize(href: "#", icon: nil, label: nil, **html_options)
+        super(**html_options)
+        @href = href
+        @icon = icon
+        @label = label
+      end
+
+      private
+
+      def action_button_classes
+        "kz-action-btn"
+      end
+
+      def render_icon(icon)
+        ApplicationController.helpers.kozenet_ui_icon(icon, class: "kz-action-btn-icon") if icon
+      end
+    end
+  end
+end

data/app/components/kozenet_ui/header_component/brand_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  class HeaderComponent < BaseComponent
+    # Brand section for the HeaderComponent
+    # Renders the brand/logo area, typically on the left of the header
+    #
+    # @example
+    #   <%= render KozenetUi::HeaderComponent::BrandComponent.new(href: root_path) do %>
+    #     <%= image_tag "logo.svg", alt: "Logo" %>
+    #     <span>MyBrand</span>
+    #   <% end %>
+    class BrandComponent < BaseComponent
+      def initialize(href: "#", **html_options)
+        super(**html_options)
+        @href = href
+      end
+
+      def call
+        tag.a(href: @href, class: brand_classes) do
+          safe_join([content])
+        end
+      end
+
+      private
+
+      def brand_classes
+        "kz-brand"
+      end
+    end
+  end
+end

data/app/components/kozenet_ui/header_component/cta_component.html.erb

@@ -0,0 +1,5 @@
+<%# frozen_string_literal: true %>
+<%# CtaComponent template for KozenetUi::HeaderComponent %>
+<%= tag.a href: @href, class: "kz-cta" do %>
+  <%= content %>
+<% end %>

data/app/components/kozenet_ui/header_component/cta_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  class HeaderComponent < BaseComponent
+    # CTA (Call To Action) section for the HeaderComponent
+    # Renders a prominent call-to-action button or link in the header
+    #
+    # @example
+    #   <%= render KozenetUi::HeaderComponent::CtaComponent.new(href: "/signup") { "Get Started" } %>
+    class CtaComponent < BaseComponent
+      def initialize(href: "#", **html_options)
+        super(**html_options)
+        @href = href
+      end
+
+      private
+
+      def cta_classes
+        "kz-cta"
+      end
+    end
+  end
+end

data/app/components/kozenet_ui/header_component/nav_item_component.html.erb

@@ -0,0 +1,8 @@
+<%# frozen_string_literal: true %>
+<%# NavItemComponent template for KozenetUi::HeaderComponent %>
+<%= tag.a href: @href, class: nav_item_classes, role: (@dropdown ? "button" : nil), data: (@dropdown ? { action: "click->kz-dropdown#toggle" } : {}) do %>
+  <%= content %>
+  <% if @dropdown %>
+    <svg class="ml-1 opacity-60" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+  <% end %>
+<% end %>

data/app/components/kozenet_ui/header_component/nav_item_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  class HeaderComponent < BaseComponent
+    # NavItem section for the HeaderComponent
+    # Renders a navigation item (link/button) in the header
+    #
+    # @example
+    #   <%= render KozenetUi::HeaderComponent::NavItemComponent.new(href: "/path", active: true) { "Home" } %>
+    class NavItemComponent < BaseComponent
+      def initialize(href: "#", active: false, dropdown: false, **html_options)
+        super(**html_options)
+        @href = href
+        @active = active
+        @dropdown = dropdown
+      end
+
+      private
+
+      def nav_item_classes
+        classes = ["kz-nav-link"]
+        classes << "is-active" if @active
+        classes << @custom_class if defined?(@custom_class) && @custom_class
+        classes.join(" ")
+      end
+    end
+  end
+end

data/app/components/kozenet_ui/header_component/search_component.html.erb

@@ -0,0 +1,17 @@
+<%# frozen_string_literal: true %>
+<%# SearchComponent template for KozenetUi::HeaderComponent %>
+<form action="<%= @action %>" method="<%= @method %>" class="kz-header-search-form" role="search">
+  <div class="kz-search-wrap">
+    <span class="kz-search-icon" aria-hidden="true">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+    </span>
+    <input
+      type="search"
+      name="<%= @name %>"
+      value="<%= @value %>"
+      placeholder="<%= @placeholder %>"
+      class="kz-search-input"
+      <%= tag.attributes(@html_options) %>
+    />
+  </div>
+</form>

data/app/components/kozenet_ui/header_component/search_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  class HeaderComponent < BaseComponent
+    # Search section for the HeaderComponent
+    # Renders a search input or form in the header
+    #
+    # @example
+    #   <%= render KozenetUi::HeaderComponent::SearchComponent.new(placeholder: "Search...") %>
+    class SearchComponent < BaseComponent
+      # rubocop:disable Metrics/MethodLength
+      def initialize(options = {})
+        placeholder = options.fetch(:placeholder, "Search...")
+        name = options.fetch(:name, "q")
+        value = options.fetch(:value, nil)
+        action = options.fetch(:action, "#")
+        method = options.fetch(:method, :get)
+        html_options = options.fetch(:html_options, {})
+        super(**html_options)
+        @placeholder = placeholder
+        @name = name
+        @value = value
+        @action = action
+        @method = method
+      end
+      # rubocop:enable Metrics/MethodLength
+    end
+  end
+end

data/app/components/kozenet_ui/header_component/user_menu_component.html.erb

@@ -0,0 +1,18 @@
+<%# frozen_string_literal: true %>
+<%# UserMenuComponent template for KozenetUi::HeaderComponent %>
+<div class="kz-user-menu relative" data-controller="kz-user-menu">
+  <button type="button" class="kz-avatar-btn flex items-center gap-2" data-action="click->kz-user-menu#toggle">
+    <% if @avatar_url.present? %>
+      <img src="<%= @avatar_url %>" alt="<%= @user_name %>" class="w-8 h-8 rounded-full" />
+    <% else %>
+      <span class="bg-gray-300 dark:bg-gray-700 w-8 h-8 rounded-full flex items-center justify-center font-bold">
+        <%= @user_name.to_s.first.upcase %>
+      </span>
+    <% end %>
+    <span class="kz-user-name"><%= @user_name %></span>
+    <svg class="ml-1 w-4 h-4" viewBox="0 0 20 20" fill="currentColor"><path d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.06l3.71-3.83a.75.75 0 1 1 1.08 1.04l-4.25 4.39a.75.75 0 0 1-1.08 0L5.21 8.27a.75.75 0 0 1 .02-1.06z"/></svg>
+  </button>
+  <div class="kz-user-dropdown absolute right-0 mt-2 w-48 bg-white dark:bg-gray-900 rounded shadow-lg z-50 hidden" data-kz-user-menu-target="dropdown">
+    <%= content %>
+  </div>
+</div>

data/app/components/kozenet_ui/header_component/user_menu_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  class HeaderComponent < BaseComponent
+    # UserMenu section for the HeaderComponent
+    # Renders a user menu dropdown or avatar in the header
+    #
+    # @example
+    #   <%= render KozenetUi::HeaderComponent::UserMenuComponent.new(user_name: "Test User", avatar_url: nil) do %>
+    #     <%= link_to "Profile", profile_path %>
+    #     <%= link_to "Logout", logout_path, method: :delete %>
+    #   <% end %>
+    class UserMenuComponent < BaseComponent
+      def initialize(user_name: nil, avatar_url: nil, **html_options)
+        super(**html_options)
+        @user_name = user_name
+        @avatar_url = avatar_url
+      end
+    end
+  end
+end

data/app/components/kozenet_ui/header_component.html.erb

@@ -0,0 +1,81 @@
+<header class="kz-header kz-header-sticky kz-header-blur" data-controller="kz-header kz-mobile-nav" data-action="scroll@window->kz-header#handleScroll">
+  <div class="kz-header-bar" data-kz-header-target="container">
+    <!-- Brand + Navigation -->
+    <div class="kz-header-start">
+      <div class="kz-brand">
+        <%= brand if brand? %>
+      </div>
+      <% if nav_items? %>
+        <nav class="kz-nav-links" aria-label="Primary navigation">
+          <% nav_items.each do |item| %>
+            <%= item %>
+          <% end %>
+        </nav>
+      <% end %>
+    </div>
+
+    <!-- Search (desktop) -->
+    <% if search? %>
+      <div class="kz-search-col">
+        <%= search %>
+      </div>
+    <% end %>
+
+    <!-- Actions -->
+    <div class="kz-header-actions">
+      <!-- Mobile search trigger -->
+      <% if search? %>
+        <button 
+          type="button" 
+          class="kz-action-btn md:hidden" 
+          aria-label="Search"
+          data-action="click->kz-header#toggleSearch"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8"/>
+            <path d="m21 21-4.35-4.35"/>
+          </svg>
+        </button>
+      <% end %>
+
+      <!-- Action buttons -->
+      <% if action_buttons? %>
+        <% action_buttons.each do |button| %>
+          <%= button %>
+        <% end %>
+      <% end %>
+
+      <!-- CTA or User Menu -->
+      <% if user_menu? %>
+        <%= user_menu %>
+      <% elsif cta? %>
+        <%= cta %>
+      <% end %>
+
+      <!-- Mobile menu trigger -->
+      <button 
+        class="kz-mobile-trigger" 
+        type="button"
+        aria-label="Menu"
+        data-action="click->kz-mobile-nav#toggle"
+        data-kz-mobile-nav-target="trigger"
+      >
+        <svg class="kz-icon-menu" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M3 6h18M3 12h18M3 18h18"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <!-- Mobile panel -->
+  <% if mobile_menu? %>
+    <div 
+      class="kz-mobile-panel hidden scale-y-0 origin-top" 
+      data-kz-mobile-nav-target="panel"
+      role="dialog"
+      aria-label="Mobile navigation"
+    >
+      <%= mobile_menu %>
+    </div>
+  <% end %>
+</header>

data/app/components/kozenet_ui/header_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  # Header component for navigation and branding
+  # Supports sticky and blur options, and slots for brand, nav, actions, etc.
+  #
+  # @example Basic usage
+  #   <%= kz_header(sticky: true, blur: true) do |header| %>
+  #     <% header.brand { ... } %>
+  #     <% header.nav_items { ... } %>
+  #   <% end %>
+  class HeaderComponent < BaseComponent
+    renders_one :brand, "KozenetUi::HeaderComponent::BrandComponent"
+    renders_one :search, "KozenetUi::HeaderComponent::SearchComponent"
+    renders_many :nav_items, "KozenetUi::HeaderComponent::NavItemComponent"
+    renders_many :action_buttons, "KozenetUi::HeaderComponent::ActionButtonComponent"
+    renders_one :cta, "KozenetUi::HeaderComponent::CtaComponent"
+    renders_one :user_menu, "KozenetUi::HeaderComponent::UserMenuComponent"
+    renders_one :mobile_menu
+
+    def initialize(
+      sticky: true,
+      blur: true,
+      **html_options
+    )
+      super(**html_options)
+      @sticky = sticky
+      @blur = blur
+    end
+
+    private
+
+    def base_classes
+      classes = ["kz-header"]
+      classes << "kz-header-sticky" if @sticky
+      classes << "kz-header-blur" if @blur
+      classes.join(" ")
+    end
+  end
+end

data/app/helpers/kozenet_ui/component_helper.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+# Helper methods for rendering Kozenet UI components in views
+module KozenetUi
+  # Helper methods for rendering Kozenet UI components in views
+  module ComponentHelper
+    include KozenetUi::IconHelper
+
+    # Render a Kozenet UI button
+    def kz_button(**options, &block)
+      render(KozenetUi::ButtonComponent.new(**options), &block)
+    end
+
+    # Render a Kozenet UI header
+    def kz_header(**options, &block)
+      render(KozenetUi::HeaderComponent.new(**options), &block)
+    end
+
+    # Render a Kozenet UI badge
+    def kz_badge(**options, &block)
+      render(KozenetUi::BadgeComponent.new(**options), &block)
+    end
+
+    # Render a Kozenet UI avatar
+    def kz_avatar(**options, &block)
+      render(KozenetUi::AvatarComponent.new(**options), &block)
+    end
+
+    # Include theme styles in layout
+    def kozenet_ui_stylesheet_tag
+      stylesheet_link_tag "kozenet_ui/tokens", "kozenet_ui/base", "kozenet_ui/components"
+    end
+
+    # Include theme JavaScript
+    def kozenet_ui_javascript_tag
+      javascript_include_tag "kozenet_ui/index", type: "module"
+    end
+
+    # Inject inline theme variables (CSP-compliant)
+    def kozenet_ui_theme_variables_tag
+      # rubocop:disable Rails/OutputSafety
+      content_tag(:style, nonce: content_security_policy_nonce) do
+        palette = KozenetUi.configuration.palette
+        tokens = KozenetUi::Theme::Tokens
+
+        <<~CSS.html_safe
+          :root {
+            #{tokens.to_css_variables}
+            #{palette.to_css_variables(mode: :light)}
+          }
+          [data-theme="dark"], .dark {
+            #{palette.to_css_variables(mode: :dark)}
+          }
+        CSS
+      end
+      # rubocop:enable Rails/OutputSafety
+    end
+  end
+end

data/app/helpers/kozenet_ui/icon_helper.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  # Helper methods for rendering SVG icons in Kozenet UI
+  module IconHelper
+    # Renders a Heroicon SVG from the gem's assets
+    # Usage: kozenet_ui_icon(:cart, class: "w-5 h-5 text-gray-500")
+    def kozenet_ui_icon(name, options = {})
+      app_path = "icons/#{name}.svg"
+      gem_path = "kozenet_ui/icons/#{name}.svg"
+      app_full_path = Rails.root.join("app/assets/images", app_path)
+      path = File.exist?(app_full_path) ? app_path : gem_path
+      image_tag(asset_path(path), options)
+    end
+  end
+end

data/lib/generators/kozenet_ui/install/install_generator.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+require "rails/generators/base"
+
+module KozenetUi
+  module Generators
+    # Generator for installing Kozenet UI into a Rails application
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      desc "Install Kozenet UI into your application"
+
+      def create_initializer
+        template "kozenet_ui.rb", "config/initializers/kozenet_ui.rb"
+      end
+
+      def copy_css_files_to_app
+        # do NOT copy CSS files to the app. Let the gem expose them via the asset pipeline.
+        say "Kozenet UI stylesheets are now available via the asset pipeline. " \
+            "Import them in your Tailwind/application.css:", :green
+        say "\n@import 'kozenet_ui/tokens.css';\n@import 'kozenet_ui/base.css';" \
+            "\n@import 'kozenet_ui/components.css';\n", :cyan
+      end
+
+      # rubocop:disable Metrics/MethodLength
+      def add_stylesheets_to_application
+        tailwind_css = nil
+        tailwind_css = "app/assets/stylesheets/application.css" if File.exist?("app/assets/stylesheets/application.css")
+
+        if tailwind_css
+          content = File.read(tailwind_css)
+          kozenet_imports = "\n/* Kozenet UI Styles */\n" \
+            "@import 'kozenet_ui/tokens.css';\n" \
+            "@import 'kozenet_ui/base.css';\n" \
+            "@import 'kozenet_ui/components.css';\n"
+
+          if content.include?("kozenet_ui/base.css")
+            say "File unchanged! Kozenet UI styles already present in #{tailwind_css}", :yellow
+          else
+            append_to_file tailwind_css, kozenet_imports
+            say "Appended Kozenet UI styles to #{tailwind_css}", :green
+          end
+        else
+          say "Could not find app/assets/stylesheets/application.css. " \
+              "Please manually import Kozenet UI stylesheets.", :yellow
+        end
+      end
+      # rubocop:enable Metrics/MethodLength
+
+      def show_readme
+        say "\n✅ Kozenet UI installed successfully!", :green
+        say "\nNext steps:", :cyan
+        say "  1. Add <%= kozenet_ui_theme_variables_tag %> to your layout <head>"
+        say "  2. Customize colors in config/initializers/kozenet_ui.rb"
+        say "  3. Start using components: <%= kz_button { 'Click me' } %>"
+        say "\nDocumentation: https://github.com/kozenetpro/kozenet_ui\n"
+      end
+
+      def install
+        create_initializer
+        copy_css_files_to_app
+        add_stylesheets_to_application
+        show_readme
+      end
+    end
+  end
+end