@b3-crow/ui-kit 0.0.37 → 0.0.39

package/docs/examples.md

@@ -1,333 +0,0 @@
-# Usage Examples
-
-## Complete Coming Soon Page
-
-Here's a complete example of a Coming Soon page using all hero components:
-
-```tsx
-import {
-  AnimatedBackground,
-  HeroText,
-  Logo,
-  TypewriterText,
-  Subtitle,
-} from '@b3-crow/ui-kit';
-
-function App() {
-  return (
-    <>
-      {/* Hero Section - must have position: relative and min-height */}
-      <section
-        style={{
-          position: 'relative',
-          minHeight: '100vh',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <AnimatedBackground />
-        <Logo src="/your-logo.png" alt="Your Logo" />
-        <HeroText text="Your Brand" />
-        <TypewriterText text="COMING SOON" />
-        <Subtitle>
-          Your subtitle text here
-          <br />
-          Can be multi-line with custom formatting
-        </Subtitle>
-      </section>
-
-      {/* Other sections - add your own background */}
-      <section
-        style={{ background: 'white', padding: '4rem 2rem', minHeight: '50vh' }}
-      >
-        <h2>Your Content Here</h2>
-        <p>Additional sections will scroll normally</p>
-      </section>
-    </>
-  );
-}
-```
-
-**Important:** The parent container of `AnimatedBackground` must have `position: relative` to properly contain the absolutely positioned background. Use `minHeight: '100vh'` for full-screen hero sections.
-
----
-
-## Button Examples
-
-```tsx
-import { Button } from '@b3-crow/ui-kit'
-
-// Outline button (default)
-<Button variant="outline">Try Now</Button>
-
-// Solid button
-<Button variant="solid">Get Started</Button>
-
-// Button as link
-<Button href="/docs">View Docs</Button>
-
-// Button with click handler
-<Button onClick={() => console.log('clicked')}>Click Me</Button>
-
-// Button without arrow
-<Button showArrow={false}>No Arrow</Button>
-```
-
----
-
-## Card Examples
-
-```tsx
-import { Card, Button } from '@b3-crow/ui-kit'
-import { FiCode, FiBook } from 'react-icons/fi'
-
-// Feature card
-<Card
-  title="Feature Title"
-  description="Feature description text goes here"
-  icon={<FiCode />}
-  index={0}
-  layout="feature"
-  button={<Button variant="outline">Try Now</Button>}
-/>
-
-// Documentation card with center alignment
-<Card
-  title="Documentation"
-  description="Read our comprehensive guides"
-  icon={<FiBook />}
-  index={1}
-  layout="documentation"
-  contentAlign="center"
-  button={<Button href="/docs">View Docs</Button>}
-/>
-
-// Simple card without button
-<Card
-  title="Simple Card"
-  description="Just text, no button needed"
-  icon={<FiCode />}
-/>
-```
-
----
-
-## Globe Examples
-
-```tsx
-import { Globe } from '@b3-crow/ui-kit'
-import { BsGlobe2, BsDatabase } from 'react-icons/bs'
-
-// Default globe with preset points
-<Globe size={500} />
-
-// Custom globe with custom data points
-<Globe
-  size={600}
-  points={[
-    {
-      label: 'Data Source',
-      icon: <BsGlobe2 />,
-      position: { x: 50, y: 30 }
-    },
-    {
-      label: 'Database',
-      icon: <BsDatabase />,
-      position: { x: -30, y: -20 }
-    }
-  ]}
-/>
-```
-
----
-
-## GradientBackground Examples
-
-```tsx
-import { GradientBackground } from '@b3-crow/ui-kit'
-
-// Top gradient (default)
-<section style={{ position: 'relative' }}>
-  <GradientBackground position="top" />
-  <div>Your content here</div>
-</section>
-
-// Bottom gradient with custom height
-<section style={{ position: 'relative' }}>
-  <GradientBackground position="bottom" height="50vh" />
-  <div>Your content here</div>
-</section>
-
-// Custom colors
-<GradientBackground
-  position="top"
-  colors={{
-    start: 'rgba(100, 50, 150, 0.9)',
-    middle1: 'rgba(80, 40, 120, 0.7)',
-    middle2: 'rgba(60, 30, 100, 0.6)',
-    middle3: 'rgba(40, 20, 80, 0.4)',
-  }}
-  blur="200px"
-/>
-```
-
----
-
-## InputField Examples
-
-```tsx
-import { InputField } from '@b3-crow/ui-kit'
-import { useState } from 'react'
-
-// Default input with submit button
-<InputField
-  placeholder="Ask CROW Anything..."
-  onSubmit={(value) => console.log('Submitted:', value)}
-/>
-
-// Controlled input
-function ControlledExample() {
-  const [inputValue, setInputValue] = useState('')
-
-  return (
-    <InputField
-      value={inputValue}
-      onChange={(value) => setInputValue(value)}
-      onSubmit={(value) => {
-        console.log('Submitted:', value)
-        setInputValue('')
-      }}
-    />
-  )
-}
-
-// Different sizes and variants
-<InputField size="sm" variant="transparent" placeholder="Small input" />
-<InputField size="md" variant="filled" placeholder="Medium filled" />
-<InputField size="lg" variant="transparent" placeholder="Large input" />
-
-// Without button
-<InputField showButton={false} placeholder="No submit button" />
-
-// Button on left
-<InputField buttonPosition="left" placeholder="Button on left" />
-```
-
----
-
-## SectionLabel Examples
-
-```tsx
-import { SectionLabel } from '@b3-crow/ui-kit'
-
-// Animated label
-<SectionLabel label="FEATURES" className="mb-16" />
-
-// Static label (no animation)
-<SectionLabel label="ABOUT" animate={false} />
-
-// With custom styling
-<SectionLabel label="TEAM" className="mb-8 opacity-80" />
-```
-
----
-
-## Full Page Example
-
-Here's a complete landing page example using multiple components:
-
-```tsx
-import {
-  AnimatedBackground,
-  HeroText,
-  Logo,
-  TypewriterText,
-  Subtitle,
-  SectionLabel,
-  Card,
-  Button,
-  Globe,
-  InputField,
-} from '@b3-crow/ui-kit';
-import { FiCode, FiBook, FiZap } from 'react-icons/fi';
-
-export default function LandingPage() {
-  return (
-    <div className="min-h-screen bg-black text-white">
-      {/* Hero Section */}
-      <section className="relative flex min-h-screen flex-col items-center justify-center">
-        <AnimatedBackground />
-        <Logo src="/logo.png" alt="CROW Logo" />
-        <HeroText text="CROW-B3" />
-        <TypewriterText text="COMING SOON" />
-        <Subtitle>
-          The future of development is here
-          <br />
-          Built for modern web applications
-        </Subtitle>
-      </section>
-
-      {/* Features Section */}
-      <section className="relative px-8 py-24">
-        <SectionLabel label="FEATURES" className="mb-16" />
-        <div className="mx-auto grid max-w-6xl gap-8 md:grid-cols-3">
-          <Card
-            title="Fast Development"
-            description="Build faster with pre-built components"
-            icon={<FiZap />}
-            layout="feature"
-            button={<Button variant="outline">Learn More</Button>}
-          />
-          <Card
-            title="Documentation"
-            description="Comprehensive guides and examples"
-            icon={<FiBook />}
-            layout="feature"
-            button={<Button href="/docs">View Docs</Button>}
-          />
-          <Card
-            title="Open Source"
-            description="Free and open source forever"
-            icon={<FiCode />}
-            layout="feature"
-            button={<Button href="/github">GitHub</Button>}
-          />
-        </div>
-      </section>
-
-      {/* Globe Section */}
-      <section className="relative flex items-center justify-center py-24">
-        <Globe size={600} />
-      </section>
-
-      {/* CTA Section */}
-      <section className="relative px-8 py-24 text-center">
-        <h2 className="mb-8 text-4xl font-bold">Get Early Access</h2>
-        <div className="mx-auto max-w-md">
-          <InputField
-            placeholder="Enter your email..."
-            size="lg"
-            onSubmit={email => console.log('Email:', email)}
-          />
-        </div>
-      </section>
-    </div>
-  );
-}
-```
-
----
-
-## Important Notes
-
-1. **Scrolling Requirements**: The parent container of `AnimatedBackground` MUST have `position: relative` and a defined height (e.g., `minHeight: '100vh'`) to enable proper scrolling
-
-2. **Tailwind CSS**: Most components use Tailwind CSS classes, ensure Tailwind is configured in your project
-
-3. **Dark Theme**: Components are designed for dark backgrounds, using white text with opacity variants
-
-4. **Animations**: All animated components use Framer Motion with scroll-triggered animations
-
-5. **TypeScript**: All components are fully typed with exported TypeScript interfaces

package/docs/screenshot.svg

@@ -1,57 +0,0 @@
-<svg width="1200" height="800" xmlns="http://www.w3.org/2000/svg">
-  <!-- Black background -->
-  <rect width="1200" height="800" fill="#000000"/>
-
-  <!-- Purple gradient circles (background effect) -->
-  <defs>
-    <radialGradient id="purpleGrad">
-      <stop offset="0%" style="stop-color:#854ED2;stop-opacity:0.5" />
-      <stop offset="70%" style="stop-color:#854ED2;stop-opacity:0" />
-    </radialGradient>
-    <radialGradient id="whiteGrad">
-      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.7" />
-      <stop offset="40%" style="stop-color:#e0c8ff;stop-opacity:0.7" />
-      <stop offset="65%" style="stop-color:#e0c8ff;stop-opacity:0" />
-    </radialGradient>
-    <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#1B0637" />
-      <stop offset="35%" style="stop-color:#2E1A4B" />
-      <stop offset="65%" style="stop-color:#563F77" />
-      <stop offset="100%" style="stop-color:#765F97" />
-    </linearGradient>
-  </defs>
-
-  <!-- Background gradients -->
-  <ellipse cx="1100" cy="480" rx="850" ry="450" fill="url(#purpleGrad)" filter="blur(40px)"/>
-  <ellipse cx="1100" cy="480" rx="250" ry="200" fill="url(#whiteGrad)" filter="blur(80px)"/>
-
-  <!-- CROW text -->
-  <text x="600" y="360" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
-        font-size="280" font-weight="650" text-anchor="middle" fill="url(#textGrad)"
-        letter-spacing="0.01em" filter="drop-shadow(0 0 80px rgba(87, 84, 96, 0.3))">
-    CROW
-  </text>
-
-  <!-- COMING SOON text -->
-  <text x="600" y="520" font-family="'Courier New', Courier, monospace"
-        font-size="24" font-weight="600" text-anchor="middle" fill="#8b7fb8"
-        letter-spacing="0.3em" filter="drop-shadow(0 0 10px rgba(139, 127, 184, 0.5))">
-    COMING SOON_
-  </text>
-
-  <!-- Subtitle -->
-  <text x="600" y="750" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
-        font-size="14" text-anchor="middle" fill="rgba(255, 255, 255, 0.52)">
-    We are thrilled to unveil CROW, our most advanced product yet,
-  </text>
-  <text x="600" y="770" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
-        font-size="14" text-anchor="middle" fill="rgba(255, 255, 255, 0.52)">
-    blending superior reasoning with extensive pretraining knowledge.
-  </text>
-
-  <!-- Note -->
-  <text x="600" y="50" font-family="sans-serif" font-size="12" text-anchor="middle"
-        fill="rgba(255, 255, 255, 0.3)" font-style="italic">
-    Screenshot Placeholder - Replace with actual screenshot
-  </text>
-</svg>

package/docs/setup.md

@@ -1,73 +0,0 @@
-# Setup Guide
-
-## Installation
-
-Install the UI kit using your preferred package manager:
-
-```bash
-bun add @b3-crow/ui-kit
-```
-
-## Local Development
-
-For local development, you can link the package directly:
-
-```json
-{
-  "dependencies": {
-    "@b3-crow/ui-kit": "file:../ui-kit"
-  }
-}
-```
-
-## Peer Dependencies
-
-Install the required peer dependencies:
-
-```bash
-bun add react react-dom framer-motion react-icons cobe
-```
-
-### Required Versions
-
-- `react`: ^19.2.0
-- `react-dom`: ^19.2.0
-- `framer-motion`: Latest
-- `react-icons`: Latest
-- `cobe`: Latest
-
-## Tailwind CSS Configuration
-
-Most components use Tailwind CSS classes. Ensure Tailwind v4 is configured in your project:
-
-```bash
-bun add -D tailwindcss @tailwindcss/postcss
-```
-
-### PostCSS Configuration
-
-Create or update `postcss.config.mjs`:
-
-```js
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-};
-```
-
-### Next.js Configuration
-
-If using with Next.js and local packages, add to `next.config.ts`:
-
-```ts
-const nextConfig = {
-  transpilePackages: ['@b3-crow/ui-kit'],
-};
-
-export default nextConfig;
-```
-
-## Dark Theme
-
-All components are designed for dark backgrounds with white text and opacity variants. Ensure your app has a dark theme configured.