kozenet_ui 0.1.0

data/app/assets/stylesheets/kozenet_ui/components/utilities.css

@@ -0,0 +1,270 @@
+@layer components {
+  /* Layout utilities */
+  .container-fluid { 
+    width: 100%; 
+    margin-left: auto; 
+    margin-right: auto; 
+    padding-left: 1rem; 
+    padding-right: 1rem; 
+  }
+  
+  @media (min-width:640px) { 
+    .container-fluid { 
+      padding-left: 1.5rem; 
+      padding-right: 1.5rem; 
+    } 
+  }
+  
+  @media (min-width:1024px) { 
+    .container-fluid { 
+      padding-left: 2rem; 
+      padding-right: 2rem; 
+    } 
+  }
+
+  /* Card components */
+  .card { 
+    border-radius: var(--kz-radius-lg); 
+    background: color-mix(in srgb, var(--kz-bg-elevated) 80%, transparent); 
+    backdrop-filter: blur(8px); 
+    border: 1px solid var(--kz-border-default); 
+    box-shadow: var(--kz-shadow-sm); 
+    padding: 1.25rem; 
+    display: flex; 
+    flex-direction: column; 
+    gap: 1rem; 
+    transition: box-shadow var(--kz-transition-base); 
+  }
+  
+  .card:hover { 
+    box-shadow: var(--kz-shadow-md); 
+  }
+  
+  .card-muted { 
+    background: color-mix(in srgb, var(--kz-bg-muted) 70%, transparent); 
+  }
+
+  /* Stats display */
+  .stat { 
+    display: flex; 
+    flex-direction: column; 
+    gap: 0.25rem; 
+  }
+  
+  .stat-label { 
+    font-size: var(--kz-font-size-xs); 
+    font-weight: var(--kz-font-weight-medium); 
+    text-transform: uppercase; 
+    letter-spacing: 0.05em; 
+    color: var(--kz-text-muted); 
+  }
+  
+  .stat-value { 
+    font-size: var(--kz-font-size-2xl); 
+    font-weight: var(--kz-font-weight-semibold); 
+  }
+
+  /* Simple button utilities (use kz-btn for full featured buttons) */
+  .btn { 
+    display: inline-flex; 
+    align-items: center; 
+    justify-content: center; 
+    gap: 0.5rem; 
+    font-weight: var(--kz-font-weight-medium); 
+    font-size: var(--kz-font-size-sm); 
+    border-radius: var(--kz-radius-md); 
+    padding: 0.5rem 1rem; 
+    user-select: none; 
+    cursor: pointer; 
+    transition: all var(--kz-transition-fast); 
+    position: relative; 
+    border: 0;
+    background: none;
+  }
+  
+  .btn:focus-visible { 
+    outline: 2px solid rgb(99 102 241 / 0.5); 
+    outline-offset: 2px; 
+  }
+  
+  .btn:disabled { 
+    opacity: 0.4; 
+    cursor: not-allowed; 
+  }
+  
+  .btn-primary { 
+    background: linear-gradient(110deg, #6366f1, #0ea5e9 55%, #06b6d4);
+    color: #fff; 
+  }
+  
+  .btn-primary:hover:not(:disabled) { 
+    transform: translateY(-2px);
+    box-shadow: var(--kz-shadow-md);
+  }
+  
+  .btn-outline { 
+    background: transparent; 
+    border: 1px solid var(--kz-border-default); 
+    color: var(--kz-text-default); 
+  }
+  
+  .btn-outline:hover:not(:disabled) { 
+    background: var(--kz-bg-muted); 
+  }
+  
+  .btn-ghost { 
+    background: transparent; 
+  }
+  
+  .btn-ghost:hover:not(:disabled) { 
+    background: var(--kz-bg-muted); 
+  }
+  
+  .btn-xs { 
+    font-size: var(--kz-font-size-xs); 
+    padding: 0.35rem 0.6rem; 
+    border-radius: var(--kz-radius-sm); 
+  }
+
+  /* Badge utility (simple version) */
+  .badge { 
+    display: inline-flex; 
+    align-items: center; 
+    border-radius: var(--kz-radius-full); 
+    padding: 0 0.5rem; 
+    height: 1.5rem; 
+    font-size: var(--kz-font-size-xs); 
+    font-weight: var(--kz-font-weight-semibold); 
+    background: linear-gradient(120deg, rgba(99,102,241,.15), rgba(14,165,233,.18)); 
+    color: var(--kz-text-muted); 
+    letter-spacing: 0.05em; 
+  }
+
+  /* Input utility */
+  .input { 
+    width: 100%; 
+    border-radius: var(--kz-radius-md); 
+    border: 1px solid var(--kz-border-default); 
+    background: var(--kz-bg-elevated); 
+    padding: 0.5rem 0.75rem; 
+    font-size: var(--kz-font-size-sm); 
+    line-height: 1.25rem; 
+    transition: all var(--kz-transition-fast);
+  }
+  
+  .input::placeholder { 
+    color: var(--kz-text-muted); 
+  }
+  
+  .input:focus { 
+    outline: 2px solid rgb(99 102 241 / 0.5); 
+    outline-offset: 2px; 
+    border-color: transparent;
+  }
+
+  /* Divider */
+  .divider { 
+    width: 100%; 
+    height: 1px; 
+    background: var(--kz-border-default); 
+  }
+
+  /* Navigation section label */
+  .nav-section-label { 
+    font-size: 0.625rem; 
+    font-weight: var(--kz-font-weight-semibold); 
+    letter-spacing: 0.1em; 
+    text-transform: uppercase; 
+    color: var(--kz-text-muted); 
+    padding-left: 0.75rem; 
+    padding-right: 0.75rem; 
+    margin-top: 1.5rem; 
+    margin-bottom: 0.5rem; 
+  }
+
+  /* Glass morphism effect */
+  .glass-panel {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: var(--kz-radius-lg);
+    box-shadow: var(--kz-shadow-lg);
+  }
+  
+  .dark .glass-panel {
+    background: rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  /* Play surface (gradient background) */
+  .play-surface {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+  }
+
+  /* Custom slider */
+  .slider {
+    -webkit-appearance: none;
+    appearance: none;
+    background: linear-gradient(to right, #8b5cf6 0%, #8b5cf6 50%, #e5e7eb 50%, #e5e7eb 100%);
+    outline: none;
+    border-radius: var(--kz-radius-md);
+    height: 8px;
+  }
+  
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: #8b5cf6;
+    cursor: pointer;
+    box-shadow: var(--kz-shadow-sm);
+  }
+  
+  .slider::-moz-range-thumb {
+    height: 20px;
+    width: 20px;
+    border-radius: 50%;
+    background: #8b5cf6;
+    cursor: pointer;
+    border: none;
+    box-shadow: var(--kz-shadow-sm);
+  }
+
+  /* Animations */
+  @keyframes fadeIn { 
+    from { 
+      opacity: 0; 
+      transform: translateY(4px); 
+    } 
+    to { 
+      opacity: 1; 
+      transform: translateY(0); 
+    } 
+  }
+
+  .animate-fadeIn {
+    animation: fadeIn 0.3s ease-out;
+  }
+}
+
+/* Theme icon utilities */
+[data-theme] .theme-icon-light, 
+[data-theme] .theme-icon-dark, 
+[data-theme] .theme-icon-system { 
+  display: none; 
+}
+
+[data-theme='light'] .theme-icon-dark { 
+  display: inline-flex; 
+}
+
+[data-theme='dark'] .theme-icon-light { 
+  display: inline-flex; 
+}
+
+[data-theme='system'] .theme-icon-system { 
+  display: inline-flex; 
+}

data/app/assets/stylesheets/kozenet_ui/components.css

@@ -0,0 +1,8 @@
+/* Kozenet UI Components */
+/* Import all component styles */
+
+@import './components/button.css';
+@import './components/header.css';
+@import './components/avatar.css';
+@import './components/badge.css';
+@import './components/utilities.css';

data/app/assets/stylesheets/kozenet_ui/tokens.css

@@ -0,0 +1,168 @@
+/* Kozenet UI Design Tokens */
+/* Auto-generated from Ruby tokens - Can be overridden */
+
+@layer base {
+  :root {
+    /* Spacing */
+    --kz-spacing-xs: 0.25rem;
+    --kz-spacing-sm: 0.5rem;
+    --kz-spacing-md: 1rem;
+    --kz-spacing-lg: 1.5rem;
+    --kz-spacing-xl: 2rem;
+    --kz-spacing-2xl: 3rem;
+    --kz-spacing-3xl: 4rem;
+
+    /* Border Radius */
+    --kz-radius-sm: 12px;
+    --kz-radius-md: 16px;
+    --kz-radius-lg: 20px;
+    --kz-radius-xl: 24px;
+    --kz-radius-2xl: 28px;
+    --kz-radius-full: 9999px;
+
+    /* Typography */
+    --kz-font-size-xs: 0.65rem;
+    --kz-font-size-sm: 0.75rem;
+    --kz-font-size-base: 0.875rem;
+    --kz-font-size-lg: 1rem;
+    --kz-font-size-xl: 1.25rem;
+    --kz-font-size-2xl: 1.5rem;
+    --kz-font-size-3xl: 2rem;
+
+    --kz-font-weight-normal: 400;
+    --kz-font-weight-medium: 500;
+    --kz-font-weight-semibold: 600;
+    --kz-font-weight-bold: 700;
+
+    /* Shadows */
+    --kz-shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 2px 6px -2px rgba(0,0,0,.08);
+    --kz-shadow-md: 0 4px 14px -6px rgba(0,0,0,.25);
+    --kz-shadow-lg: 0 10px 30px -12px rgba(0,0,0,.45);
+    --kz-shadow-xl: 0 20px 60px -26px rgba(0,0,0,.28);
+
+    /* Transitions */
+    --kz-transition-fast: 0.15s ease;
+    --kz-transition-base: 0.25s ease;
+    --kz-transition-slow: 0.35s ease;
+
+    /* Z-index */
+    --kz-z-dropdown: 50;
+    --kz-z-sticky: 60;
+    --kz-z-modal: 70;
+    --kz-z-popover: 80;
+    --kz-z-toast: 90;
+
+    /* Default Light Mode Colors */
+    --kz-bg-base: #ffffff;
+    --kz-bg-elevated: #f8fafc;
+    --kz-bg-muted: #f1f5f9;
+    --kz-text-default: #0f172a;
+    --kz-text-muted: #64748b;
+    --kz-border-default: #e2e8f0;
+    --kz-border-muted: #f1f5f9;
+
+    --kz-primary-500: 99, 102, 241; /* #6366f1 */
+    --kz-accent-500: 6, 182, 212;   /* #06b6d4 */
+    --kz-accent-400: 14, 165, 233;  /* #0ea5e9 */
+    --kz-cta-gradient: linear-gradient(110deg, #6366f1, #0ea5e9 55%, #06b6d4);
+    --kz-cta-gradient-dark: linear-gradient(110deg, #818cf8, #38bdf8 55%, #06b6d4);
+    --kz-cta-text: #fff;
+    --kz-cta-text-dark: #fff;
+
+    --bg-default: #ffffff;
+    --bg-muted: #f8fafc;
+    --bg-elevated: #ffffff;
+    --bg-accent: #0ea5e9;
+    --bg-accent-hover: #0284c7;
+    --text-default: #0f172a;
+    --text-muted: #64748b;
+    --border-default: #e2e8f0;
+    --border-strong: #cbd5e1;
+    --focus-ring: #0ea5e9;
+    --radius-xs: 2px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-pill: 999px;
+    --shadow-color: 210 40% 2%;
+    --gradient-base-from: #f0f9ff;
+    --gradient-base-to: #e0f2fe;
+    --gradient-accent-from: #6366f1;
+    --gradient-accent-via: #0ea5e9;
+    --gradient-accent-to: #06b6d4;
+    --gradient-spot-1: rgba(99,102,241,0.35);
+    --gradient-spot-2: rgba(14,165,233,0.30);
+  }
+
+  /* Dark Mode */
+  [data-theme="dark"],
+  .dark {
+    --kz-bg-base: #0f172a;
+    --kz-bg-elevated: #1e293b;
+    --kz-bg-muted: #334155;
+    --kz-text-default: #f1f5f9;
+    --kz-text-muted: #94a3b8;
+    --kz-border-default: #334155;
+    --kz-border-muted: #1e293b;
+
+    --kz-cta-gradient: var(--kz-cta-gradient-dark);
+    --kz-cta-text: var(--kz-cta-text-dark);
+
+    --bg-default: #0b0d11;
+    --bg-muted: #11151c;
+    --bg-elevated: rgba(23,28,36,0.9);
+    --bg-accent: #0284c7;
+    --bg-accent-hover: #0369a1;
+    --text-default: #f1f5f9;
+    --text-muted: #64748b;
+    --border-default: #1f242c;
+    --border-strong: #2a3039;
+    --focus-ring: #0ea5e9;
+    --shadow-color: 210 40% 2%;
+    --gradient-base-from: #0b0d11;
+    --gradient-base-to: #11151c;
+    --gradient-accent-from: #1e40af;
+    --gradient-accent-via: #0369a1;
+    --gradient-accent-to: #0891b2;
+    --gradient-spot-1: rgba(56,189,248,0.20);
+    --gradient-spot-2: rgba(99,102,241,0.18);
+  }
+
+  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+  body { background: var(--bg-default); color: var(--text-default); font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); }
+  * { border-color: var(--border-default); }
+  ::selection { background: var(--bg-accent); color: #fff; }
+  .app-bg { 
+    position: relative;
+    min-height: 100vh;
+    overflow-x: hidden;
+    isolation: isolate;
+  }
+  .app-bg:not(:first-of-type) { background: none !important; }
+  .app-bg::before { 
+    content: "";
+    position: fixed; inset:0; pointer-events:none; z-index:-1;
+    background:
+      radial-gradient(circle at 18% 22%, var(--gradient-spot-1) 0, transparent 60%),
+      radial-gradient(circle at 82% 18%, var(--gradient-spot-2) 0, transparent 62%),
+      linear-gradient(135deg, var(--gradient-base-from) 0%, var(--gradient-base-to) 100%);
+    background-attachment: fixed;
+  }
+  .dark .app-bg::before {
+    background:
+      radial-gradient(circle at 18% 22%, var(--gradient-spot-1) 0, transparent 60%),
+      radial-gradient(circle at 82% 18%, var(--gradient-spot-2) 0, transparent 62%),
+      linear-gradient(140deg, var(--gradient-base-from) 0%, var(--gradient-base-to) 100%);
+  }
+  .app-bg::after { 
+    content: "";
+    position: fixed; inset:0; pointer-events:none; z-index:-1; mix-blend-mode:overlay;
+    background: linear-gradient(120deg, var(--gradient-accent-from), var(--gradient-accent-via) 55%, var(--gradient-accent-to));
+    opacity: .07; border-radius: inherit;
+  }
+  .dark .app-bg::after { opacity:.10; }
+  @supports (-webkit-touch-callout: none) {
+    .app-bg::before, .app-bg::after { position: absolute; }
+  }
+}

data/app/components/kozenet_ui/avatar_component.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  # Avatar component for user profiles and images
+  # Supports images, initials, and icons with multiple sizes
+  #
+  # @example With image
+  #   <%= kz_avatar(src: user.avatar_url, alt: user.name) %>
+  #
+  # @example With initials
+  #   <%= kz_avatar(initials: "JD", variant: :primary) %>
+  #
+  # @example With custom size
+  #   <%= kz_avatar(src: url, size: :lg) %>
+  class AvatarComponent < BaseComponent
+    # rubocop:disable Metrics/ParameterLists
+    def initialize(
+      src: nil,
+      alt: "Avatar",
+      initials: nil,
+      variant: :primary,
+      size: :md,
+      html_options: {}
+    )
+      super(variant: variant, size: size, **html_options)
+      @src = src
+      @alt = alt
+      @initials = initials
+    end
+    # rubocop:enable Metrics/ParameterLists
+
+    def call
+      tag.div(**html_attrs) do
+        avatar_content
+      end
+    end
+
+    private
+
+    def base_classes
+      "kz-avatar inline-flex items-center justify-center overflow-hidden"
+    end
+
+    def avatar_content
+      if @src.present?
+        tag.img(src: @src, alt: @alt, class: "w-full h-full object-cover")
+      elsif @initials.present?
+        tag.span(class: "kz-avatar-initials") { @initials }
+      else
+        default_icon
+      end
+    end
+
+    # rubocop:disable Metrics/MethodLength
+    def default_icon
+      tag.svg(
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2"
+      ) do
+        safe_join([
+                    tag.circle(cx: "12", cy: "8", r: "5"),
+                    tag.path(d: "M20 21a8 8 0 1 0-16 0")
+                  ])
+      end
+    end
+    # rubocop:enable Metrics/MethodLength
+  end
+end

data/app/components/kozenet_ui/badge_component.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  # Badge component for labels, statuses, and counts
+  # Supports multiple variants and sizes
+  #
+  # @example Status badge
+  #   <%= kz_badge(variant: :success) { "Active" } %>
+  #
+  # @example Count badge
+  #   <%= kz_badge(variant: :primary, size: :sm) { "99+" } %>
+  #
+  # @example With icon
+  #   <%= kz_badge(variant: :warning) do |badge| %>
+  #     <% badge.with_icon do %>
+  #       <svg>...</svg>
+  #     <% end %>
+  #     Pending
+  #   <% end %>
+  class BadgeComponent < BaseComponent
+    renders_one :icon
+
+    def initialize(
+      variant: :primary,
+      size: :md,
+      pill: true,
+      **html_options
+    )
+      super(variant: variant, size: size, **html_options)
+      @pill = pill
+    end
+
+    def call
+      tag.span(**html_attrs) do
+        badge_content
+      end
+    end
+
+    private
+
+    def base_classes
+      classes = [
+        "kz-badge",
+        "inline-flex items-center gap-1",
+        "font-semibold uppercase tracking-wider"
+      ]
+      classes << "rounded-full" if @pill
+      classes.join(" ")
+    end
+
+    def badge_content
+      if icon?
+        safe_join([
+                    tag.span(class: "kz-badge-icon") { icon },
+                    tag.span { content }
+                  ])
+      else
+        content
+      end
+    end
+  end
+end

data/app/components/kozenet_ui/base_component.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+module KozenetUi
+  # Base component that all Kozenet UI components inherit from
+  # Provides common functionality for variant handling, class merging, etc.
+  class BaseComponent < ViewComponent::Base
+    attr_reader :variant, :size, :html_options
+
+    def initialize(variant: nil, size: nil, class: nil, **html_options)
+      super()
+      @variant = variant || KozenetUi.configuration.default_variant
+      @size = size || KozenetUi.configuration.default_size
+      @custom_class = binding.local_variable_get(:class)
+      @html_options = html_options
+    end
+
+    private
+
+    # Build final CSS classes
+    def component_classes
+      [
+        base_classes,
+        variant_class,
+        size_class,
+        @custom_class
+      ].compact.join(" ")
+    end
+
+    # Override in subclasses
+    def base_classes
+      "kz-component"
+    end
+
+    # Get variant class from Variants helper
+    def variant_class
+      return nil unless @variant
+
+      component_type = self.class.name.demodulize.underscore.gsub("_component", "")
+      begin
+        KozenetUi::Theme::Variants.public_send(component_type, @variant)
+      rescue StandardError
+        nil
+      end
+    end
+
+    # Get size class from Variants helper
+    def size_class
+      return nil unless @size
+
+      KozenetUi::Theme::Variants.size(@size)
+    end
+
+    # Merge HTML attributes safely
+    def html_attrs
+      @html_options.merge(class: component_classes)
+    end
+
+    # Helper for rendering slots with fallback
+    def render_slot_or_content(slot, &fallback)
+      if slot?
+        slot
+      elsif fallback
+        capture(&fallback)
+      end
+    end
+
+    # Check if running in dark mode (from request or config)
+    def dark_mode?
+      helpers.cookies[:theme] == "dark"
+    rescue StandardError
+      false
+    end
+
+    # Get current theme palette
+    def theme_palette
+      KozenetUi.configuration.palette
+    end
+
+    # Stimulus controller name with prefix
+    def stimulus_controller(name)
+      "#{KozenetUi.configuration.stimulus_prefix}-#{name}"
+    end
+  end
+end