# Silke Package

UI component library for the Vev editor. 60+ components built on SilkeBox as the foundational layout primitive.

## Adding a New Component

1. Create directory: `src/components/silke-my-component/`
2. Create these files:

```
silke-my-component/
├── silke-my-component.tsx       # Component implementation
├── silke-my-component.scss      # CSS Modules styles
├── silke-my-component.mdx       # Documentation with examples
└── index.ts                     # Barrel export
```

3. Export from `src/components/index.ts`: `export * from './silke-my-component'`
4. Rebuild: `pnpm build` (or `pnpm watch` during dev)

### Component File Pattern

```tsx
import React from 'react';
import classnames from 'classnames/bind';
import styles from './silke-my-component.scss';

const cl = classnames.bind(styles);

interface SilkeMyComponentProps {
  /** Description of prop */
  label?: string;
  size?: 's' | 'base';
}

export function SilkeMyComponent({ label, size = 'base' }: SilkeMyComponentProps) {
  return <div className={cl('root', { [`size-${size}`]: size })}>{label}</div>;
}
```

### SCSS File Pattern

```scss
@use '../../variables' as *;

.root {
  // Use SCSS variables for spacing
  padding: $space-m;
  font-size: $font-base;

  // Use CSS custom properties for colors
  background: var(--color-surface-1);
  color: var(--color-neutral-100);
  border-radius: var(--border-radius-small);
  box-shadow: var(--shadow-level-1);
}
```

### Index File

```typescript
export * from './silke-my-component';
```

## Styling Rules

- **CSS Modules** only (`.scss` files, imported via `classnames.bind`)
- Use `$space-*` SCSS variables for spacing, `$font-*` for typography, `$size-*` for sizing
- Use `var(--color-*)` CSS custom properties for colors
- Use `var(--shadow-level-*)` for elevation, `var(--border-radius-*)` for corners
- Never use hardcoded color values — always use design tokens

## Key Files

| File | Purpose |
|------|---------|
| `src/components/index.ts` | All component exports — add new components here |
| `src/_variables.scss` | SCSS design tokens (spacing, sizing, typography) |
| `src/styles/core.scss` | CSS custom properties (colors, shadows, radii, opacity) |
| `src/icons.tsx` | Icon definitions (`SilkeIconDefinitions` map) |
| `src/silke-theme-provider.tsx` | Runtime color theming via context |
| `src/hooks/index.ts` | Shared hooks (drag-and-drop, resize, form, etc.) |

## Build

```bash
pnpm build        # Clean + types + esbuild (outputs dist/index.js + dist/styles.css)
pnpm watch        # Watch mode (parallel tsc + esbuild)
```

Output: `dist/index.js` (ESM), `dist/styles.css` (all aggregated styles), `dist/types/` (declarations).

After changes, consumers (editor) need to restart or rebuild to pick up updates.

## Conventions

- One component per directory, kebab-case naming
- Use `React.forwardRef` when DOM access is needed
- Extend `BoxButtonProps` or similar base types for consistency
- Use React Context (`createContext`) for component-level style defaults
- Always write MDX docs with usage examples and props table
- Look at `silke-divider/` for a simple example, `silke-button/` for a complex one