brainzlab-ui 0.1.0

data/app/assets/stylesheets/brainzlab_ui/utilities.css

@@ -0,0 +1,262 @@
+/* ============================================
+   BRAINZLAB UI - UTILITIES
+   ============================================ */
+
+/* ----------------------------------------
+   FOCUS RING
+   ---------------------------------------- */
+.focus-ring:focus-visible {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 2px;
+}
+
+/* ----------------------------------------
+   GRADIENTS
+   ---------------------------------------- */
+.bg-gradient-warm {
+  background: linear-gradient(135deg, var(--color-cream-50) 0%, var(--color-cream-100) 100%);
+}
+
+.bg-gradient-primary {
+  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
+}
+
+/* Gradient Mesh */
+.gradient-mesh {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.gradient-blob {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.5;
+}
+
+.gradient-blob-primary { background: var(--color-primary-300); }
+.gradient-blob-success { background: var(--color-success-300); }
+.gradient-blob-error { background: var(--color-error-300); }
+.gradient-blob-info { background: var(--color-info-300); }
+
+/* ----------------------------------------
+   TERMINAL/CODE
+   ---------------------------------------- */
+.terminal {
+  background: var(--color-ink-950);
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.terminal-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.terminal-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.terminal-dot-red { background: #ff5f56; }
+.terminal-dot-yellow { background: #ffbd2e; }
+.terminal-dot-green { background: #27ca40; }
+
+.terminal-body {
+  padding: 20px;
+  font-family: var(--font-mono);
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--color-cream-200);
+}
+
+/* Log Entries */
+.log-entry {
+  animation: log-slide-in 0.3s var(--ease-out-expo);
+}
+
+.log-level {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.log-level-info { background: rgba(90, 154, 110, 0.2); color: var(--color-success-400); }
+.log-level-error { background: rgba(199, 85, 85, 0.2); color: var(--color-error-400); }
+.log-level-debug { background: rgba(90, 138, 180, 0.2); color: var(--color-info-400); }
+.log-level-warn { background: rgba(238, 142, 109, 0.2); color: var(--color-primary-400); }
+
+/* ----------------------------------------
+   TOOLTIPS
+   ---------------------------------------- */
+.tooltip {
+  position: relative;
+}
+
+.tooltip-content {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.5rem 0.75rem;
+  background: var(--color-ink-950);
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.15s ease;
+  margin-bottom: 0.5rem;
+  z-index: 50;
+}
+
+.tooltip:hover .tooltip-content {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* ----------------------------------------
+   SKELETON LOADING
+   ---------------------------------------- */
+.skeleton {
+  background: linear-gradient(90deg, var(--color-cream-100) 25%, var(--color-cream-200) 50%, var(--color-cream-100) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 0.5rem;
+}
+
+.skeleton-text { height: 1rem; width: 100%; }
+.skeleton-title { height: 1.5rem; width: 60%; }
+.skeleton-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
+.skeleton-button { height: 2.5rem; width: 6rem; border-radius: 9999px; }
+
+/* ----------------------------------------
+   MODAL OVERLAY
+   ---------------------------------------- */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 40;
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  border-radius: 1rem;
+  box-shadow: var(--shadow-large);
+  z-index: 50;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow: auto;
+}
+
+.modal-sm { width: 24rem; }
+.modal-md { width: 32rem; }
+.modal-lg { width: 48rem; }
+.modal-xl { width: 64rem; }
+
+.modal-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--color-cream-200);
+}
+
+.modal-body { padding: 1.5rem; }
+
+.modal-footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--color-cream-200);
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+/* ----------------------------------------
+   DROPDOWN
+   ---------------------------------------- */
+.dropdown {
+  position: relative;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  min-width: 12rem;
+  margin-top: 0.5rem;
+  background: white;
+  border: 1px solid var(--color-cream-200);
+  border-radius: 0.75rem;
+  box-shadow: var(--shadow-medium);
+  z-index: 30;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-8px);
+  transition: all 0.15s ease;
+}
+
+.dropdown.open .dropdown-menu,
+.dropdown:focus-within .dropdown-menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  color: var(--color-ink-700);
+  transition: all 0.15s ease;
+}
+
+.dropdown-item:hover {
+  background: var(--color-cream-50);
+  color: var(--color-ink-900);
+}
+
+.dropdown-item:first-child { border-radius: 0.75rem 0.75rem 0 0; }
+.dropdown-item:last-child { border-radius: 0 0 0.75rem 0.75rem; }
+
+.dropdown-divider {
+  height: 1px;
+  background: var(--color-cream-200);
+  margin: 0.25rem 0;
+}
+
+/* ----------------------------------------
+   SPACING UTILITIES
+   ---------------------------------------- */
+.space-y-1 > * + * { margin-top: 0.25rem; }
+.space-y-2 > * + * { margin-top: 0.5rem; }
+.space-y-3 > * + * { margin-top: 0.75rem; }
+.space-y-4 > * + * { margin-top: 1rem; }
+.space-y-6 > * + * { margin-top: 1.5rem; }
+.space-y-8 > * + * { margin-top: 2rem; }
+
+/* ----------------------------------------
+   TEXT UTILITIES
+   ---------------------------------------- */
+.text-primary { color: var(--color-primary-600); }
+.text-success { color: var(--color-success-600); }
+.text-error { color: var(--color-error-600); }
+.text-warning { color: var(--color-warning-600); }
+.text-info { color: var(--color-info-600); }
+.text-muted { color: var(--color-ink-500); }

data/lib/brainzlab/components/alert.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Brainzlab
+  module Components
+    class Alert < Base
+      TYPES = {
+        success: "alert-success",
+        error: "alert-error",
+        warning: "alert-warning",
+        info: "alert-info"
+      }.freeze
+
+      def initialize(type: :info, **attrs)
+        @type = type
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        div(class: alert_classes, role: "alert", **@attrs, &)
+      end
+
+      private
+
+      def alert_classes
+        classes("alert", TYPES[@type], @attrs[:class])
+      end
+    end
+  end
+end

data/lib/brainzlab/components/avatar.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Brainzlab
+  module Components
+    class Avatar < Base
+      SIZES = {
+        sm: "avatar-sm",
+        md: "avatar-md",
+        lg: "avatar-lg",
+        xl: "avatar-xl"
+      }.freeze
+
+      VARIANTS = {
+        primary: "avatar-primary",
+        neutral: "avatar-neutral"
+      }.freeze
+
+      def initialize(name: nil, src: nil, size: :md, variant: :primary, **attrs)
+        @name = name
+        @src = src
+        @size = size
+        @variant = variant
+        @attrs = attrs
+      end
+
+      def view_template
+        if @src
+          img(
+            src: @src,
+            alt: @name || "Avatar",
+            class: avatar_classes
+          )
+        else
+          div(class: avatar_classes) do
+            initials
+          end
+        end
+      end
+
+      private
+
+      def avatar_classes
+        classes("avatar", SIZES[@size], VARIANTS[@variant], @attrs[:class])
+      end
+
+      def initials
+        return "" unless @name
+        @name.split.map { |part| part[0] }.take(2).join.upcase
+      end
+    end
+  end
+end

data/lib/brainzlab/components/badge.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Brainzlab
+  module Components
+    class Badge < Base
+      VARIANTS = {
+        primary: "badge-primary",
+        success: "badge-success",
+        error: "badge-error",
+        warning: "badge-warning",
+        info: "badge-info",
+        neutral: "badge-neutral"
+      }.freeze
+
+      def initialize(variant: :neutral, **attrs)
+        @variant = variant
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        span(class: badge_classes, **@attrs, &)
+      end
+
+      private
+
+      def badge_classes
+        classes("badge", VARIANTS[@variant], @attrs[:class])
+      end
+    end
+  end
+end

data/lib/brainzlab/components/base.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require "phlex"
+
+module Brainzlab
+  module Components
+    class Base < Phlex::HTML
+      include Phlex::Rails::Helpers::Routes if defined?(Phlex::Rails::Helpers::Routes)
+
+      def classes(*args)
+        args.flatten.compact.join(" ")
+      end
+    end
+  end
+end

data/lib/brainzlab/components/button.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Brainzlab
+  module Components
+    class Button < Base
+      VARIANTS = {
+        primary: "btn-primary",
+        secondary: "btn-secondary",
+        ghost: "btn-ghost",
+        danger: "btn-danger"
+      }.freeze
+
+      SIZES = {
+        sm: "btn-sm",
+        md: nil,
+        lg: "btn-lg"
+      }.freeze
+
+      def initialize(variant: :primary, size: :md, lift: false, disabled: false, type: "button", **attrs)
+        @variant = variant
+        @size = size
+        @lift = lift
+        @disabled = disabled
+        @type = type
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        button(
+          type: @type,
+          class: button_classes,
+          disabled: @disabled,
+          **@attrs,
+          &
+        )
+      end
+
+      private
+
+      def button_classes
+        classes(
+          VARIANTS[@variant],
+          SIZES[@size],
+          @lift ? "btn-lift" : nil,
+          @attrs[:class]
+        )
+      end
+    end
+  end
+end

data/lib/brainzlab/components/card.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module Brainzlab
+  module Components
+    class Card < Base
+      def initialize(interactive: false, lift: false, **attrs)
+        @interactive = interactive
+        @lift = lift
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        div(class: card_classes, **@attrs, &)
+      end
+
+      private
+
+      def card_classes
+        classes(
+          "card",
+          @interactive ? "card-interactive" : nil,
+          @lift ? "card-lift" : nil,
+          @attrs[:class]
+        )
+      end
+    end
+
+    class CardHeader < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        div(class: classes("card-header", @attrs[:class]), **@attrs.except(:class), &)
+      end
+    end
+
+    class CardBody < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        div(class: classes("card-body", @attrs[:class]), **@attrs.except(:class), &)
+      end
+    end
+
+    class CardFooter < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        div(class: classes("card-footer", @attrs[:class]), **@attrs.except(:class), &)
+      end
+    end
+  end
+end

data/lib/brainzlab/components/empty_state.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Brainzlab
+  module Components
+    class EmptyState < Base
+      def initialize(title:, description: nil, icon: nil, **attrs)
+        @title = title
+        @description = description
+        @icon = icon
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        div(class: classes("empty-state", @attrs[:class]), **@attrs.except(:class)) do
+          if @icon
+            div(class: "empty-state-icon") { @icon }
+          end
+
+          h3(class: "empty-state-title") { @title }
+
+          if @description
+            p(class: "empty-state-description") { @description }
+          end
+
+          if block_given?
+            div(class: "mt-4") { yield }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/brainzlab/components/input.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module Brainzlab
+  module Components
+    class Input < Base
+      def initialize(type: "text", error: false, **attrs)
+        @type = type
+        @error = error
+        @attrs = attrs
+      end
+
+      def view_template
+        input(
+          type: @type,
+          class: input_classes,
+          **@attrs
+        )
+      end
+
+      private
+
+      def input_classes
+        classes(
+          "input",
+          @error ? "input-error" : nil,
+          @attrs[:class]
+        )
+      end
+    end
+
+    class Label < Base
+      def initialize(for_input: nil, **attrs)
+        @for_input = for_input
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        label(
+          for: @for_input,
+          class: classes("label", @attrs[:class]),
+          **@attrs.except(:class),
+          &
+        )
+      end
+    end
+
+    class Select < Base
+      def initialize(error: false, **attrs)
+        @error = error
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        select(
+          class: select_classes,
+          **@attrs,
+          &
+        )
+      end
+
+      private
+
+      def select_classes
+        classes(
+          "select",
+          @error ? "input-error" : nil,
+          @attrs[:class]
+        )
+      end
+    end
+
+    class Textarea < Base
+      def initialize(error: false, **attrs)
+        @error = error
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        textarea(
+          class: textarea_classes,
+          **@attrs,
+          &
+        )
+      end
+
+      private
+
+      def textarea_classes
+        classes(
+          "textarea",
+          @error ? "input-error" : nil,
+          @attrs[:class]
+        )
+      end
+    end
+  end
+end

data/lib/brainzlab/components/modal.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Brainzlab
+  module Components
+    class Modal < Base
+      SIZES = {
+        sm: "modal-sm",
+        md: "modal-md",
+        lg: "modal-lg",
+        xl: "modal-xl"
+      }.freeze
+
+      def initialize(size: :md, **attrs)
+        @size = size
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        div(class: "modal-overlay", data: { modal_target: "overlay" })
+        div(class: modal_classes, role: "dialog", **@attrs, &)
+      end
+
+      private
+
+      def modal_classes
+        classes("modal", SIZES[@size], @attrs[:class])
+      end
+    end
+
+    class ModalHeader < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        div(class: classes("modal-header", @attrs[:class]), **@attrs.except(:class), &)
+      end
+    end
+
+    class ModalBody < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        div(class: classes("modal-body", @attrs[:class]), **@attrs.except(:class), &)
+      end
+    end
+
+    class ModalFooter < Base
+      def initialize(**attrs)
+        @attrs = attrs
+      end
+
+      def view_template(&)
+        div(class: classes("modal-footer", @attrs[:class]), **@attrs.except(:class), &)
+      end
+    end
+  end
+end