brainzlab-ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 13d80bf67037932fc8c3745319d2f23d7d5a510ae7775cd6276b303a52fec8e4
+  data.tar.gz: 8b1606fd13965a96ae121fd2e973d6c8d67a6f158f1eefc6eeecded170b432bb
+SHA512:
+  metadata.gz: aecbb45750388fd87c6c4704f84357f339f3919c878dec39f98c004d2fa0b8ec1826199e93a7c54ffc78cc46dcf21a6174b1f7e3976d4e1fa1569103111011ce
+  data.tar.gz: d7be25d5b9c9115441dd47297e014f64ea468177baa3088155a0b0ad9e6581b578b0e6b68e4dd1ce0291fea53b0589d780d92f6c28fe1ae6f01a1f7aa75a47b4

data/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [0.1.0] - 2024-12-27
+
+### Added
+- Initial release
+- Design tokens (colors, shadows, typography, animations)
+- Component CSS classes (buttons, cards, badges, forms, etc.)
+- Phlex components (Button, Card, Badge, Input, Alert, Avatar, Table, NavItem, StatCard, EmptyState, Modal)
+- Rails Engine for asset integration
+- Tailwind CSS integration

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Brainz Lab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,67 @@
+# Brainzlab UI
+
+Unified design system for Brainz Lab products. Anthropic/Claude-inspired design with Phlex components and Tailwind CSS.
+
+## Installation
+
+Add to your Gemfile:
+
+```ruby
+# Local development (Docker)
+if File.exist?("/brainzlab-ui")
+  gem "brainzlab-ui", path: "/brainzlab-ui"
+else
+  gem "brainzlab-ui", "~> 0.1.0"
+end
+```
+
+## CSS Setup
+
+Import the design system in your Tailwind CSS file:
+
+```css
+/* app/assets/tailwind/application.css */
+@import "brainzlab_ui/base";
+
+/* Your project-specific overrides below */
+```
+
+## Usage
+
+### Phlex Components
+
+```erb
+<%= render Brainzlab::Components::Button.new(variant: :primary) { "Save" } %>
+<%= render Brainzlab::Components::Card.new { "Content" } %>
+<%= render Brainzlab::Components::Badge.new(variant: :success) { "Active" } %>
+<%= render Brainzlab::Components::Alert.new(type: :info) { "Note..." } %>
+```
+
+### CSS Classes
+
+```html
+<button class="btn-primary">Primary Button</button>
+<button class="btn-secondary">Secondary Button</button>
+<div class="card">Card content</div>
+<span class="badge badge-success">Active</span>
+```
+
+## Design Tokens
+
+### Colors
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--color-primary-500` | #D97706 | Anthropic orange |
+| `--color-cream-50` | #FAFAF9 | Background |
+| `--color-ink-900` | #1C1917 | Text |
+
+### Typography
+
+- **Sans**: Inter, system-ui
+- **Serif**: Source Serif 4, Georgia
+- **Mono**: JetBrains Mono, ui-monospace
+
+## License
+
+MIT License - see LICENSE file.

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

@@ -0,0 +1,171 @@
+/* ============================================
+   BRAINZLAB UI - ANIMATIONS
+   ============================================ */
+
+/* Keyframes */
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(40px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fade-in-down {
+  from { opacity: 0; transform: translateY(-40px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes fade-in-scale {
+  from { opacity: 0; transform: scale(0.9); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes slide-in-left {
+  from { opacity: 0; transform: translateX(-60px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slide-in-right {
+  from { opacity: 0; transform: translateX(60px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-20px) rotate(2deg); }
+}
+
+@keyframes float-slow {
+  0%, 100% { transform: translateY(0) scale(1); }
+  50% { transform: translateY(-30px) scale(1.02); }
+}
+
+@keyframes pulse-glow {
+  0%, 100% { opacity: 0.5; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(1.05); }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes ping-slow {
+  0% { transform: scale(1); opacity: 1; }
+  75%, 100% { transform: scale(2); opacity: 0; }
+}
+
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
+  20%, 40%, 60%, 80% { transform: translateX(4px); }
+}
+
+@keyframes heartbeat {
+  0%, 100% { transform: scale(1); }
+  14% { transform: scale(1.1); }
+  28% { transform: scale(1); }
+  42% { transform: scale(1.1); }
+  70% { transform: scale(1); }
+}
+
+@keyframes bar-grow {
+  from { transform: scaleX(0); transform-origin: left; }
+  to { transform: scaleX(1); transform-origin: left; }
+}
+
+@keyframes log-slide-in {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Animation Utilities */
+.animate-fade-in-up { animation: fade-in-up 0.8s var(--ease-out-expo) forwards; }
+.animate-fade-in-down { animation: fade-in-down 0.8s var(--ease-out-expo) forwards; }
+.animate-fade-in-scale { animation: fade-in-scale 0.6s var(--ease-out-expo) forwards; }
+.animate-slide-in-left { animation: slide-in-left 0.8s var(--ease-out-expo) forwards; }
+.animate-slide-in-right { animation: slide-in-right 0.8s var(--ease-out-expo) forwards; }
+.animate-float { animation: float 6s ease-in-out infinite; }
+.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
+.animate-pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }
+.animate-shimmer {
+  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+}
+.animate-ping-slow { animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
+.animate-blink { animation: blink 1s step-end infinite; }
+.animate-shake { animation: shake 0.5s ease-in-out; }
+.animate-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }
+.animate-bar-grow { animation: bar-grow 1s var(--ease-out-expo) forwards; }
+
+/* Scroll-Triggered Animations */
+.scroll-animate {
+  opacity: 0;
+  transform: translateY(40px);
+  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
+}
+.scroll-animate.is-visible { opacity: 1; transform: translateY(0); }
+
+.scroll-animate-left {
+  opacity: 0;
+  transform: translateX(-60px);
+  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
+}
+.scroll-animate-left.is-visible { opacity: 1; transform: translateX(0); }
+
+.scroll-animate-right {
+  opacity: 0;
+  transform: translateX(60px);
+  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
+}
+.scroll-animate-right.is-visible { opacity: 1; transform: translateX(0); }
+
+.scroll-animate-scale {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
+}
+.scroll-animate-scale.is-visible { opacity: 1; transform: scale(1); }
+
+/* Stagger Delays */
+.stagger > *:nth-child(1) { transition-delay: 0ms; }
+.stagger > *:nth-child(2) { transition-delay: 100ms; }
+.stagger > *:nth-child(3) { transition-delay: 200ms; }
+.stagger > *:nth-child(4) { transition-delay: 300ms; }
+.stagger > *:nth-child(5) { transition-delay: 400ms; }
+.stagger > *:nth-child(6) { transition-delay: 500ms; }
+.stagger > *:nth-child(7) { transition-delay: 600ms; }
+.stagger > *:nth-child(8) { transition-delay: 700ms; }
+
+/* Animation Delays */
+.delay-100 { animation-delay: 100ms; }
+.delay-200 { animation-delay: 200ms; }
+.delay-300 { animation-delay: 300ms; }
+.delay-400 { animation-delay: 400ms; }
+.delay-500 { animation-delay: 500ms; }
+.delay-600 { animation-delay: 600ms; }
+.delay-700 { animation-delay: 700ms; }
+.delay-800 { animation-delay: 800ms; }
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  .scroll-animate,
+  .scroll-animate-left,
+  .scroll-animate-right,
+  .scroll-animate-scale {
+    opacity: 1;
+    transform: none;
+  }
+}

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

@@ -0,0 +1,23 @@
+/* ============================================
+   BRAINZLAB UI - BASE
+   ============================================
+   Anthropic/Claude-inspired design system
+
+   Usage:
+   @import "tailwindcss";
+   @import "brainzlab_ui/base";
+
+   Note: Import tailwindcss BEFORE this file
+*/
+
+/* Design Tokens */
+@import "./tokens.css";
+
+/* Component Styles */
+@import "./components.css";
+
+/* Animations */
+@import "./animations.css";
+
+/* Utilities */
+@import "./utilities.css";