kozenet_ui 0.1.0

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

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+KozenetUi.configure do |config|
+  # Customize your brand colors and gradients
+  # config.customize_colors(
+  #   primary: "#6366f1",    # Indigo
+  #   secondary: "#8b5cf6",  # Purple
+  #   accent: "#06b6d4",     # Cyan
+  #   success: "#10b981",    # Green
+  #   warning: "#f59e0b",    # Amber
+  #   error: "#ef4444",      # Red
+  #   gradient_from: "#f0f9ff",         # Light gradient start
+  #   gradient_to: "#e0f2fe",           # Light gradient end
+  #   gradient_accent_from: "#6366f1",  # Accent gradient start
+  #   gradient_accent_via: "#0ea5e9",   # Accent gradient mid
+  #   gradient_accent_to: "#06b6d4",    # Accent gradient end
+  #   gradient_spot_1: "rgba(99,102,241,0.35)",
+  #   gradient_spot_2: "rgba(14,165,233,0.30)",
+  #   gradient_from_dark: "#181c2a",         # Dark gradient start
+  #   gradient_to_dark: "#23283a",           # Dark gradient end
+  #   gradient_accent_from_dark: "#1e40af",  # Dark accent gradient start
+  #   gradient_accent_via_dark: "#0369a1",   # Dark accent gradient mid
+  #   gradient_accent_to_dark: "#0891b2",    # Dark accent gradient end
+  #   gradient_spot_1_dark: "rgba(56,189,248,0.20)",
+  #   gradient_spot_2_dark: "rgba(99,102,241,0.18)"
+  # )
+
+  # Default variant for components
+  # config.default_variant = :primary
+
+  # Default size for components
+  # config.default_size = :md
+
+  # Theme mode: :light, :dark, or :system (follows OS/browser)
+  # config.theme = :system
+
+  # Stimulus controller prefix
+  # config.stimulus_prefix = "kz"
+end

data/lib/generators/kozenet_ui/install/templates/tailwind.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  content: [
+    './app/views/**/*.html.erb',
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.js',
+    './app/components/**/*.{rb,erb}',
+    // Include Kozenet UI components
+    './vendor/bundle/ruby/**/kozenet_ui-*/app/{components,helpers,views}/**/*.{rb,erb}'
+  ],
+  darkMode: ['class', '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      colors: {
+        // Your custom colors will be available via CSS variables
+      }
+    }
+  },
+  plugins: []
+}

data/lib/kozenet_ui/configuration.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  # Configuration for Kozenet UI gem
+  class Configuration
+    attr_accessor :palette, :default_variant, :default_size, :theme, :stimulus_prefix
+
+    def initialize
+      @palette = Theme::Palette.new
+      @default_variant = :primary
+      @default_size = :md
+      @theme = :system
+      @stimulus_prefix = "kz"
+    end
+
+    # Allow custom color overrides including gradients
+    def customize_colors(colors = {})
+      @palette = Theme::Palette.new(colors)
+    end
+  end
+end

data/lib/kozenet_ui/engine.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+require "rails/engine"
+require "view_component"
+
+module KozenetUi
+  # Rails engine for Kozenet UI gem
+  class Engine < ::Rails::Engine
+    isolate_namespace KozenetUi
+
+    # Add generators path
+    config.generators do |g|
+      g.test_framework :rspec
+    end
+
+    # This is CRITICAL - tells Rails where to find generators
+    config.app_generators.scaffold_controller = :scaffold_controller
+
+    initializer "kozenet_ui.generators" do
+      # Explicitly add generators path
+      config.generators do |g|
+        g.templates.unshift File.expand_path("../generators", __dir__)
+      end
+    end
+
+    # Configure where to look for components
+    config.view_component.preview_paths << "#{root}/spec/components/previews" if Rails.env.development?
+
+    # Add assets paths (for Rails 7/Sprockets only)
+    if config.respond_to?(:assets) && config.assets.respond_to?(:paths)
+      config.assets.paths << root.join("app/assets/stylesheets")
+      config.assets.paths << root.join("app/assets/javascripts")
+
+      # Precompile assets
+      config.assets.precompile += %w[
+        kozenet_ui/tokens.css
+        kozenet_ui/base.css
+        kozenet_ui/components.css
+        kozenet_ui/index.js
+      ]
+    end
+
+    # Auto-load components
+    config.autoload_paths << root.join("app/components")
+    config.eager_load_paths << root.join("app/components")
+
+    # Make helpers available
+    initializer "kozenet_ui.helpers" do
+      ActiveSupport.on_load(:action_controller_base) do
+        helper KozenetUi::ComponentHelper
+      end
+    end
+
+    # Inject CSS variables into layout
+    initializer "kozenet_ui.theme_injection", after: :load_config_initializers do
+      ActiveSupport.on_load(:action_view) do
+        ActiveSupport.on_load(:action_view) { prepend ThemeHelper }
+      end
+    end
+
+    initializer "kozenet_ui.assets" do |app|
+      if app.config.respond_to?(:assets) && app.config.assets.respond_to?(:paths)
+        app.config.assets.paths << root.join("app/assets/stylesheets/kozenet_ui")
+        app.config.assets.paths << root.join("app/assets/stylesheets/kozenet_ui/components")
+        app.config.assets.paths << root.join("app/assets/images/kozenet_ui/icons")
+      end
+    end
+  end
+
+  # Helper methods for injecting Kozenet UI theme variables into views
+  module ThemeHelper
+    def kozenet_ui_theme_tag
+      content_tag(:style, kozenet_ui_theme_variables, nonce: content_security_policy_nonce)
+    end
+
+    # rubocop:disable Rails/OutputSafety
+    def kozenet_ui_theme_variables
+      <<~CSS.html_safe
+        :root {
+          /* Design Tokens */
+          #{KozenetUi::Theme::Tokens.to_css_variables}
+          /* Color Palette (Light Mode) */
+          #{KozenetUi.configuration.palette.to_css_variables(mode: :light)}
+        }
+
+        [data-theme="dark"], .dark {
+          /* Color Palette (Dark Mode) */
+          #{KozenetUi.configuration.palette.to_css_variables(mode: :dark)}
+        }
+      CSS
+    end
+    # rubocop:enable Rails/OutputSafety
+  end
+end

data/lib/kozenet_ui/theme/palette.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+require "color"
+
+module KozenetUi
+  module Theme
+    # Dynamic color palette system with auto-generated shades
+    # Supports light/dark modes and custom brand colors
+    #
+    # @example
+    #   KozenetUi::Theme::Palette.new(primary: "#123456")
+    class Palette
+      DEFAULT_COLORS = {
+        primary: "#6366f1",    # Indigo
+        secondary: "#8b5cf6",  # Purple
+        accent: "#06b6d4",     # Cyan
+        success: "#10b981",    # Green
+        warning: "#f59e0b",    # Amber
+        error: "#ef4444",      # Red
+        info: "#0ea5e9"        # Sky
+      }.freeze
+
+      # Neutral colors (semantic)
+      NEUTRALS_LIGHT = {
+        bg_base: "#ffffff",
+        bg_elevated: "#f8fafc",
+        bg_muted: "#f1f5f9",
+        text_default: "#0f172a",
+        text_muted: "#64748b",
+        border_default: "#e2e8f0",
+        border_muted: "#f1f5f9"
+      }.freeze
+
+      NEUTRALS_DARK = {
+        bg_base: "#0f172a",
+        bg_elevated: "#1e293b",
+        bg_muted: "#334155",
+        text_default: "#f1f5f9",
+        text_muted: "#94a3b8",
+        border_default: "#334155",
+        border_muted: "#1e293b"
+      }.freeze
+
+      attr_reader :colors
+
+      def initialize(custom_colors = {})
+        @colors = DEFAULT_COLORS.merge(custom_colors)
+      end
+
+      # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/MethodLength, Metrics/PerceivedComplexity
+      def to_css_variables(mode: :light)
+        variables = []
+
+        # Brand colors with shades (only for valid hex colors)
+        @colors.each do |name, hex|
+          next if name.to_s.start_with?("gradient_spot_")
+          next if name.to_s.end_with?("_dark")
+
+          if hex.is_a?(String) && hex.match?(/^#(?:[0-9a-fA-F]{3}){1,2}$/)
+            shades = generate_shades(hex)
+            shades.each do |shade, color|
+              variables << "--kz-#{name}-#{shade}: #{color};"
+            end
+          else
+            # For non-hex, just output as a base variable
+            variables << "--kz-#{name}: #{hex};"
+          end
+        end
+
+        # Semantic neutrals
+        neutrals = mode == :dark ? NEUTRALS_DARK : NEUTRALS_LIGHT
+        neutrals.each do |name, value|
+          variables << "--kz-#{name.to_s.tr("_", "-")}: #{value};"
+        end
+
+        # Gradient tokens (allow user to override or fallback to palette)
+        if mode == :dark
+          variables << "--gradient-base-from: #{@colors[:gradient_from_dark] || "#181c2a"};"
+          variables << "--gradient-base-to: #{@colors[:gradient_to_dark] || "#23283a"};"
+          variables << "--gradient-accent-from: #{@colors[:gradient_accent_from_dark] || "#1e40af"};"
+          variables << "--gradient-accent-via: #{@colors[:gradient_accent_via_dark] || "#0369a1"};"
+          variables << "--gradient-accent-to: #{@colors[:gradient_accent_to_dark] || "#0891b2"};"
+          variables << "--gradient-spot-1: #{@colors[:gradient_spot_1_dark] || "rgba(56,189,248,0.20)"};"
+          variables << "--gradient-spot-2: #{@colors[:gradient_spot_2_dark] || "rgba(99,102,241,0.18)"};"
+        else
+          variables << "--gradient-base-from: #{@colors[:gradient_from] || "#f0f9ff"};"
+          variables << "--gradient-base-to: #{@colors[:gradient_to] || "#e0f2fe"};"
+          variables << "--gradient-accent-from: #{@colors[:gradient_accent_from] || "#6366f1"};"
+          variables << "--gradient-accent-via: #{@colors[:gradient_accent_via] || "#0ea5e9"};"
+          variables << "--gradient-accent-to: #{@colors[:gradient_accent_to] || "#06b6d4"};"
+          # rubocop:disable Naming/VariableNumber
+          variables << "--gradient-spot-1: #{@colors[:gradient_spot_1] || "rgba(99,102,241,0.35)"};"
+          variables << "--gradient-spot-2: #{@colors[:gradient_spot_2] || "rgba(14,165,233,0.30)"};"
+          # rubocop:enable Naming/VariableNumber
+        end
+
+        variables.join("\n    ")
+      end
+      # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/MethodLength, Metrics/PerceivedComplexity
+
+      private
+
+      # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
+      # Generate 50-900 shades from a base color
+      def generate_shades(hex)
+        base = Color::RGB.by_hex(hex)
+
+        {
+          50 => lighten(base, 0.45).html,
+          100 => lighten(base, 0.35).html,
+          200 => lighten(base, 0.25).html,
+          300 => lighten(base, 0.15).html,
+          400 => lighten(base, 0.08).html,
+          500 => hex, # Base color
+          600 => darken(base, 0.08).html,
+          700 => darken(base, 0.15).html,
+          800 => darken(base, 0.25).html,
+          900 => darken(base, 0.35).html
+        }
+      end
+      # rubocop:enable Metrics/AbcSize, Metrics/MethodLength
+
+      def lighten(color, amount)
+        color.lighten_by(amount * 100)
+      end
+
+      def darken(color, amount)
+        color.darken_by(amount * 100)
+      end
+    end
+  end
+end

data/lib/kozenet_ui/theme/tokens.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  module Theme
+    # Design tokens for the Kozenet UI system
+    class Tokens
+      # Spacing scale (in rem)
+      SPACING = {
+        xs: "0.25rem",   # 4px
+        sm: "0.5rem",    # 8px
+        md: "1rem",      # 16px
+        lg: "1.5rem",    # 24px
+        xl: "2rem",      # 32px
+        "2xl": "3rem",   # 48px
+        "3xl": "4rem"    # 64px
+      }.freeze
+
+      # Border radius (Apple-style rounded)
+      RADIUS = {
+        sm: "12px",
+        md: "16px",
+        lg: "20px",
+        xl: "24px",
+        "2xl": "28px",
+        full: "9999px"
+      }.freeze
+
+      # Typography scale
+      FONT_SIZE = {
+        xs: "0.65rem",    # 10.4px
+        sm: "0.75rem",    # 12px
+        base: "0.875rem", # 14px
+        lg: "1rem",       # 16px
+        xl: "1.25rem",    # 20px
+        "2xl": "1.5rem",  # 24px
+        "3xl": "2rem"     # 32px
+      }.freeze
+
+      FONT_WEIGHT = {
+        normal: "400",
+        medium: "500",
+        semibold: "600",
+        bold: "700"
+      }.freeze
+
+      # Shadows for depth effects
+      SHADOW = {
+        sm: "0 1px 2px rgba(0,0,0,.05), 0 2px 6px -2px rgba(0,0,0,.08)",
+        md: "0 4px 14px -6px rgba(0,0,0,.25)",
+        lg: "0 10px 30px -12px rgba(0,0,0,.45)",
+        xl: "0 20px 60px -26px rgba(0,0,0,.28)"
+      }.freeze
+
+      # Transitions
+      TRANSITION = {
+        fast: "0.15s ease",
+        base: "0.25s ease",
+        slow: "0.35s ease"
+      }.freeze
+
+      # Z-index layers
+      Z_INDEX = {
+        dropdown: "50",
+        sticky: "60",
+        modal: "70",
+        popover: "80",
+        toast: "90"
+      }.freeze
+
+      class << self
+        # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity
+        def to_css_variables
+          variables = []
+
+          # Spacing
+          SPACING.each { |key, value| variables << "--kz-spacing-#{key}: #{value};" }
+
+          # Radius
+          RADIUS.each { |key, value| variables << "--kz-radius-#{key}: #{value};" }
+
+          # Typography
+          FONT_SIZE.each { |key, value| variables << "--kz-font-size-#{key}: #{value};" }
+          FONT_WEIGHT.each { |key, value| variables << "--kz-font-weight-#{key}: #{value};" }
+
+          # Shadows
+          SHADOW.each { |key, value| variables << "--kz-shadow-#{key}: #{value};" }
+
+          # Transitions
+          TRANSITION.each { |key, value| variables << "--kz-transition-#{key}: #{value};" }
+
+          # Z-index
+          Z_INDEX.each { |key, value| variables << "--kz-z-#{key}: #{value};" }
+
+          variables.join("\n          ")
+        end
+        # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity
+      end
+    end
+  end
+end

data/lib/kozenet_ui/theme/variants.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  module Theme
+    # Variant mappings for components
+    # Maps semantic variants to Tailwind classes
+    class Variants
+      BUTTON = {
+        primary: "kz-variant-primary",
+        secondary: "kz-variant-secondary",
+        accent: "kz-variant-accent",
+        success: "kz-variant-success",
+        warning: "kz-variant-warning",
+        error: "kz-variant-error",
+        ghost: "kz-variant-ghost",
+        outline: "kz-variant-outline"
+      }.freeze
+
+      BADGE = {
+        primary: "kz-badge-primary",
+        secondary: "kz-badge-secondary",
+        success: "kz-badge-success",
+        warning: "kz-badge-warning",
+        error: "kz-badge-error",
+        info: "kz-badge-info"
+      }.freeze
+
+      SIZES = {
+        xs: "kz-size-xs",
+        sm: "kz-size-sm",
+        md: "kz-size-md",
+        lg: "kz-size-lg",
+        xl: "kz-size-xl"
+      }.freeze
+
+      class << self
+        def button(variant)
+          BUTTON[variant] || BUTTON[:primary]
+        end
+
+        def badge(variant)
+          BADGE[variant] || BADGE[:primary]
+        end
+
+        def size(size)
+          SIZES[size] || SIZES[:md]
+        end
+      end
+    end
+  end
+end

data/lib/kozenet_ui/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  VERSION = "0.1.0"
+end

data/lib/kozenet_ui.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require_relative "kozenet_ui/version"
+require_relative "kozenet_ui/engine"
+require_relative "kozenet_ui/configuration"
+require_relative "kozenet_ui/theme/tokens"
+require_relative "kozenet_ui/theme/palette"
+require_relative "kozenet_ui/theme/variants"
+
+# Main entry point for Kozenet UI gem
+module KozenetUi
+  class Error < StandardError; end
+
+  class << self
+    attr_writer :configuration
+
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+    def configure
+      yield(configuration)
+    end
+
+    # Reset configuration (useful for testing)
+    def reset_configuration!
+      @configuration = Configuration.new
+    end
+  end
+end