@nimblegiant/stilts 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nimble Giant
+
+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.

package/README.md

@@ -0,0 +1,361 @@
+# 🦒 Stilts Design System
+
+Nimble Giant's whimsical yet disciplined design system - a collection of reusable React components and design tokens built for flexibility and delight.
+
+## Overview
+
+Stilts is a framework-agnostic design system extracted from Nimble Giant's website. It provides:
+
+- 10 production-ready React components
+- Comprehensive design tokens (colors, spacing, typography, animations)
+- Full TypeScript support
+- Tree-shakable ESM and CJS builds
+- Tailwind CSS integration
+
+## Installation
+
+```bash
+npm install @nimblegiant/stilts
+# or
+bun add @nimblegiant/stilts
+# or
+yarn add @nimblegiant/stilts
+```
+
+## Quick Start
+
+### 1. Import Styles
+
+```typescript
+import '@nimblegiant/stilts/styles';
+```
+
+### 2. Use Components
+
+```tsx
+import { MainNav, PageHero, TeamGrid } from '@nimblegiant/stilts';
+
+function App() {
+  return (
+    <>
+      <MainNav currentPath="/" />
+      <PageHero
+        title="Welcome to Stilts"
+        subtitle="A whimsical yet disciplined design system"
+        align="center"
+      />
+      <TeamGrid team={teamMembers} />
+    </>
+  );
+}
+```
+
+### 3. Access Design Tokens
+
+```typescript
+import { colors, spacing, animations } from '@nimblegiant/stilts/tokens';
+
+const primaryColor = colors.primary.DEFAULT; // '#02aec2'
+const space4 = spacing[4]; // '1rem'
+const springEasing = animations.easings.spring; // 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+```
+
+## Components
+
+### Layout Components
+
+#### MainNav
+Responsive navigation with theme toggle and mobile menu.
+
+```tsx
+import { MainNav } from '@nimblegiant/stilts';
+
+<MainNav currentPath="/about" isPortfolioPage={false} />
+```
+
+### UI Components
+
+#### Toast
+Global toast notification system.
+
+```tsx
+import { Toast } from '@nimblegiant/stilts';
+
+// Component usage
+<Toast />
+
+// Programmatic usage (global)
+window.showToast({
+  type: 'success',
+  title: 'Success!',
+  message: 'Your changes have been saved.',
+  duration: 3000
+});
+```
+
+### Pattern Components
+
+#### PageHero
+Simple hero section with optional background image.
+
+```tsx
+import { PageHero } from '@nimblegiant/stilts';
+
+<PageHero
+  title="About Us"
+  subtitle="Building amazing things"
+  eyebrow="Company"
+  description="We're a team of designers and developers..."
+  align="center"
+  backgroundImage="/hero-bg.jpg"
+/>
+```
+
+#### VideoHero
+Full-screen hero with video background and service cards.
+
+```tsx
+import { VideoHero } from '@nimblegiant/stilts';
+
+<VideoHero
+  title="Transform Your Business"
+  tagline="Digital Solutions"
+  description="We build products that scale"
+  cards={serviceCards}
+/>
+```
+
+#### TeamGrid
+Display team members in a responsive grid.
+
+```tsx
+import { TeamGrid } from '@nimblegiant/stilts';
+
+<TeamGrid
+  team={[
+    {
+      name: "Jane Doe",
+      role: "Engineering",
+      title: "Co-Founder",
+      image: "/team/jane.jpg",
+      bio: "Jane is a...",
+      linkedin: "https://linkedin.com/in/jane"
+    }
+  ]}
+/>
+```
+
+#### ServiceSection
+Service features section with grid layout.
+
+```tsx
+import { ServiceSection } from '@nimblegiant/stilts';
+
+<ServiceSection
+  id="services"
+  title="Our Services"
+  description="What we offer"
+  features={featuresList}
+/>
+```
+
+#### ProcessSteps
+Horizontal or vertical process timeline.
+
+```tsx
+import { ProcessSteps } from '@nimblegiant/stilts';
+
+<ProcessSteps
+  steps={[
+    { title: "Step 1", description: "First step" },
+    { title: "Step 2", description: "Second step" }
+  ]}
+  orientation="horizontal"
+/>
+```
+
+#### StatBar
+Statistics display bar.
+
+```tsx
+import { StatBar } from '@nimblegiant/stilts';
+
+<StatBar
+  stats={[
+    { value: "100+", label: "Projects" },
+    { value: "50+", label: "Clients" }
+  ]}
+/>
+```
+
+#### IndustryGrid
+Industry showcase grid.
+
+```tsx
+import { IndustryGrid } from '@nimblegiant/stilts';
+
+<IndustryGrid
+  industries={[
+    { name: "Healthcare", icon: "🏥" },
+    { name: "Finance", icon: "💰" }
+  ]}
+/>
+```
+
+#### ContentPage
+MDX content page wrapper.
+
+```tsx
+import { ContentPage } from '@nimblegiant/stilts';
+
+<ContentPage>
+  <h1>Page Title</h1>
+  <p>Content goes here...</p>
+</ContentPage>
+```
+
+## Design Tokens
+
+### Colors
+
+```typescript
+import { colors } from '@nimblegiant/stilts/tokens';
+
+colors.primary.DEFAULT // '#02aec2'
+colors.primary[500]    // Shade variants
+colors.accent.violet   // Brand accents
+colors.semantic.success // Semantic colors
+colors.gray[500]       // Neutral scale
+```
+
+### Spacing
+
+```typescript
+import { spacing } from '@nimblegiant/stilts/tokens';
+
+spacing[4]  // '1rem' (16px)
+spacing[8]  // '2rem' (32px)
+spacing[16] // '4rem' (64px)
+```
+
+### Animations
+
+```typescript
+import { durations, easings } from '@nimblegiant/stilts/tokens';
+
+durations.fast     // '100ms'
+durations.normal   // '200ms'
+easings.spring     // Bouncy easing
+easings.smooth     // Smooth easing
+```
+
+## Tailwind CSS Integration
+
+Stilts works seamlessly with Tailwind CSS. The design system uses CSS variables that can be integrated into your Tailwind configuration.
+
+### Option 1: Use Pre-compiled CSS
+
+```typescript
+import '@nimblegiant/stilts/styles';
+```
+
+### Option 2: Extend Tailwind Config
+
+```javascript
+// tailwind.config.js
+export default {
+  content: [
+    './src/**/*.{ts,tsx}',
+    './node_modules/@nimblegiant/stilts/dist/**/*.js',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'var(--color-primary)',
+        // ... map other CSS variables
+      },
+    },
+  },
+};
+```
+
+## TypeScript Support
+
+Stilts is built with TypeScript and includes full type definitions.
+
+```typescript
+import type { ColorToken, SpacingToken } from '@nimblegiant/stilts/tokens';
+
+const myColor: ColorToken = colors.primary;
+const mySpacing: SpacingToken = spacing;
+```
+
+## Framework Compatibility
+
+Stilts components are pure React components with no framework-specific dependencies. They work with:
+
+- **React** ✅
+- **Next.js** ✅
+- **Astro** ✅ (with @astrojs/react)
+- **Gatsby** ✅
+- **Remix** ✅
+- Any other React-based framework
+
+## Browser Support
+
+Stilts supports all modern browsers:
+
+- Chrome (last 2 versions)
+- Firefox (last 2 versions)
+- Safari (last 2 versions)
+- Edge (last 2 versions)
+
+## Development
+
+### Build
+
+```bash
+bun install
+bun run build
+```
+
+### Type Check
+
+```bash
+bun run typecheck
+```
+
+### Watch Mode
+
+```bash
+bun run dev
+```
+
+## Package Structure
+
+```
+stilts/
+├── dist/               # Built files
+│   ├── index.js        # ESM bundle
+│   ├── index.cjs       # CommonJS bundle
+│   └── index.d.ts      # TypeScript definitions
+├── src/
+│   ├── components/     # React components
+│   ├── styles/         # CSS design tokens
+│   ├── tokens/         # TypeScript tokens
+│   └── types/          # Shared types
+└── package.json
+```
+
+## License
+
+MIT © Nimble Giant
+
+## Contributing
+
+This package is currently maintained internally by Nimble Giant. For questions or issues, please contact the team.
+
+## Links
+
+- [Nimble Giant Website](https://nimble-giant.com)
+- [GitHub Repository](https://github.com/nimble-giant/giantkit)