basscode-extrude/README.md

A compact, elegant 3D extruded UI component library for React with TypeScript support

# basscode-extrude

A compact, elegant 3D extruded UI component library for React with TypeScript support. Perfect for Next.js Tailwind projects, but uses modular CSS internally for maximum compatibility.

## ✨ Features

- **Compact & Elegant**: Clean 3D extruded design with consistent styling
- **TypeScript**: Full TypeScript support with exported prop types
- **Modular CSS**: No external dependencies, works with any CSS framework
- **Next.js Ready**: Optimized for Next.js applications
- **Tree Shakeable**: Import only what you need

## 📦 Installation

```bash
npm install basscode-extrude
# or
yarn add basscode-extrude
# or
pnpm add basscode-extrude
```

## 🚀 Usage

### 1. Import Components and Styles

```tsx
// Import the CSS styles (required for proper styling)
import 'basscode-extrude/extrude.css';

// Import components
import { Button, Card, Input } from 'basscode-extrude';

function MyComponent() {
  return (
    <Card padding="medium">
      <h2>Login Form</h2>
      <Input 
        placeholder="Enter your email" 
        type="email"
        onChange={(e) => console.log(e.target.value)}
      />
      <Input 
        placeholder="Enter your password" 
        type="password"
      />
      <Button onClick={() => console.log('Login clicked')}>
        Login
      </Button>
    </Card>
  );
}
```

### 2. Alternative CSS Import

You can also import the CSS in your main CSS file or `globals.css`:

```css
@import 'basscode-extrude/extrude.css';
```

## 🧩 Components

### Button
Compact button with fully rounded corners and 3D effect.

```tsx
<Button 
  variant="primary" // or "secondary"
  onClick={() => {}}
  disabled={false}
>
  Click me
</Button>
```

**Props:**
- `children`: React.ReactNode
- `onClick?`: () => void
- `variant?`: 'primary' | 'secondary' (default: 'primary')
- `disabled?`: boolean (default: false)
- `type?`: 'button' | 'submit' | 'reset' (default: 'button')
- `className?`: string

### Card
Light 3D card container with consistent border radius.

```tsx
<Card 
  padding="medium" // "none" | "small" | "medium" | "large"
  shadow="light"   // "light" | "medium" | "heavy"
>
  Card content goes here
</Card>
```

**Props:**
- `children`: React.ReactNode
- `className?`: string
- `padding?`: 'none' | 'small' | 'medium' | 'large' (default: 'medium')
- `shadow?`: 'light' | 'medium' | 'heavy' (default: 'light')

### Input
Clean 3D input field with focus states.

```tsx
<Input 
  placeholder="Enter text..."
  value={value}
  onChange={(e) => setValue(e.target.value)}
  size="medium" // "small" | "medium" | "large"
/>
```

**Props:**
- `value?`: string
- `onChange?`: (e: React.ChangeEvent<HTMLInputElement>) => void
- `placeholder?`: string
- `type?`: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' (default: 'text')
- `disabled?`: boolean (default: false)
- `required?`: boolean (default: false)
- `className?`: string
- `size?`: 'small' | 'medium' | 'large' (default: 'medium')
- `id?`: string
- `name?`: string

## 🎨 Design System

The components follow a consistent design system with:

- **Button radius**: Fully rounded (9999px)
- **Card/Input radius**: 12px
- **Colors**: CSS custom properties for easy theming
- **Shadows**: Layered shadows for depth
- **Transitions**: Smooth 200ms cubic-bezier animations

## 🛠️ Development

To build the package:

```bash
npm run build
```

To clean the dist folder:

```bash
npm run clean
```

## 📄 License

MIT