npm package: @symviosis/design-system
Description: Symbiotic Ecosystem Dark Gradient Design System - A modern React component library with dark theme and gradient aesthetics
Author: Villagaia Impact Hub
Latest version: 1.0.0

# Symbiotic Ecosystem Design System

A modern React component library featuring a dark gradient theme with beautiful UI components built with TypeScript and Tailwind CSS.

![npm version](https://img.shields.io/npm/v/@symviosis/design-system)
![license](https://img.shields.io/npm/l/@symviosis/design-system)

## Features

- 🌙 **Dark Theme First** - Optimized for dark mode with #0C0F19 background
- 🎨 **Gradient Aesthetics** - Beautiful blue gradient (#70A7FF → #2578FF)
- 📐 **12-Column Grid System** - Responsive layout with 1440px max width
- 🎯 **TypeScript Support** - Full type definitions included
- 🎪 **Tailwind CSS** - Utility-first styling approach
- 📦 **Tree-shakeable** - Import only what you need
- ♿ **Accessible** - Built with Radix UI primitives

## Installation

```bash
npm install @symviosis/design-system
```

or with Yarn:

```bash
yarn add @symviosis/design-system
```

## Quick Start

### 1. Import the styles

Add the design system styles to your application:

```tsx
// In your main App.tsx or index.tsx
import '@symviosis/design-system/dist/styles.css';
```

### 2. Configure Tailwind (Optional)

If you're using Tailwind CSS, you can use our preset configuration:

```js
// tailwind.config.js
const designSystemPreset = require('@symviosis/design-system/src/styles/tailwind.preset');

module.exports = {
  presets: [designSystemPreset],
  // ... your other configurations
}
```

### 3. Use the components

```tsx
import { CustomButton, Container, Grid, Column } from '@symviosis/design-system';

function App() {
  return (
    <Container>
      <Grid>
        <Column span={12}>
          <h1>Welcome to Symbiotic Design System</h1>
          <CustomButton variant="primary">
            Get Started
          </CustomButton>
        </Column>
      </Grid>
    </Container>
  );
}
```

## Components

### CustomButton

A versatile button component with multiple variants and states.

```tsx
import { CustomButton } from '@symviosis/design-system';

// Primary gradient button
<CustomButton variant="primary">Primary Button</CustomButton>

// Secondary button
<CustomButton variant="secondary">Secondary Button</CustomButton>

// Outlined buttons
<CustomButton variant="primaryOutlined">Primary Outlined</CustomButton>
<CustomButton variant="secondaryOutlined">Secondary Outlined</CustomButton>
<CustomButton variant="thirdOutlined">Third Outlined</CustomButton>

// Ghost and Link variants
<CustomButton variant="ghost">Ghost Button</CustomButton>
<CustomButton variant="link">Link Button</CustomButton>

// Sizes
<CustomButton size="sm">Small</CustomButton>
<CustomButton size="default">Default</CustomButton>
<CustomButton size="lg">Large</CustomButton>
<CustomButton size="icon">🔍</CustomButton>

// Disabled state
<CustomButton disabled>Disabled Button</CustomButton>
```

### Grid System

A responsive 12-column grid system with Container, Grid, and Column components.

```tsx
import { Container, Grid, Column } from '@symviosis/design-system';

<Container>
  <Grid>
    <Column span={12}>Full width</Column>
    <Column span={6}>Half width</Column>
    <Column span={6}>Half width</Column>
    <Column span={4}>One third</Column>
    <Column span={4}>One third</Column>
    <Column span={4}>One third</Column>
    
    {/* Responsive columns */}
    <Column span={12} md={6} lg={4}>
      Responsive column
    </Column>
  </Grid>
</Container>
```

### CustomTabs

Tab navigation component with smooth transitions.

```tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@symviosis/design-system';

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">
    Content for tab 1
  </TabsContent>
  <TabsContent value="tab2">
    Content for tab 2
  </TabsContent>
  <TabsContent value="tab3">
    Content for tab 3
  </TabsContent>
</Tabs>
```

### IconWrapper

A wrapper component for icons with hover states.

```tsx
import { IconWrapper } from '@symviosis/design-system';

<IconWrapper>
  <YourIcon />
</IconWrapper>

<IconWrapper active>
  <ActiveIcon />
</IconWrapper>

<IconWrapper hoverable={false}>
  <StaticIcon />
</IconWrapper>
```

## Design Tokens

The design system includes the following design tokens:

### Colors
- **Background**: `#0C0F19`
- **Card**: `#21263C`
- **Primary Gradient**: `#70A7FF → #2578FF`
- **Icon Default**: `#949FB7`
- **Icon Active**: `#70A7FF`

### Typography
- **Font Family**: Inter
- **Font Weights**: 300, 400, 500, 600, 700

### Spacing
- **Grid Gutter**: 20px
- **Container Margins**: 32px
- **Max Width**: 1440px

### Border Radius
- **Cards**: 10px
- **Buttons**: 20px

## Utility Functions

### cn - Class Name Merger

A utility function for merging Tailwind CSS classes with proper precedence.

```tsx
import { cn } from '@symviosis/design-system';

const className = cn(
  'base-class',
  condition && 'conditional-class',
  'override-class'
);
```

## TypeScript Support

All components are fully typed. Import types directly:

```tsx
import type { CustomButtonProps } from '@symviosis/design-system';

const MyButton: React.FC<CustomButtonProps> = (props) => {
  // Your implementation
};
```

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

## License

MIT © Villagaia Impact Hub

## Links

- [GitHub Repository](https://github.com/villagaiaimpacthub/symbiotic_ecosystem_design_system)
- [NPM Package](https://www.npmjs.com/package/@symviosis/design-system)
- [Issue Tracker](https://github.com/villagaiaimpacthub/symbiotic_ecosystem_design_system/issues)

## Changelog

### v1.0.0
- Initial release
- Core components: CustomButton, Grid System, CustomTabs, IconWrapper
- Dark gradient theme
- TypeScript support
- Complete documentation