open-index/open-npm huggingface dataset:
npm package: @kloddy/zod-editor
Description: A professional, recursive, Zod-powered schema editor for React.
Latest version: 0.1.0

# @kloddy/zod-editor

A professional, recursive, Zod-powered schema editor for React.

## Features

- **Recursive Editing**: Build deep schemas with support for nesting (Objects, Arrays, Unions, Records).
- **Comprehensive Zod Support**: Includes refinements for string formats (email, url, etc.), number ranges, and special types.
- **Premium UI**: Framer Motion animations and custom CSS for a state-of-the-art experience.
- **Library Mode**: Built with Vite for easy integration into other projects (ESM/CJS).
- **TypeScript First**: Full type safety and declaration file generation.

## Installation

```bash
npm install @kloddy/zod-editor zod framer-motion lucide-react clsx tailwind-merge
```

## Usage

```tsx
import { ZodEditor } from '@kloddy/zod-editor';
import { convertToZodObject } from '@kloddy/zod-editor/utils';
// Note: CSS is automatically injected!

function MyComponent() {
  const handleExport = (schema) => {
    console.log('Zod Schema:', schema);
  };

  return (
    <ZodEditor 
      onExport={handleExport}
      theme={{
        primary: '#3b82f6',
        bg: '#1e293b',
        text: '#f8fafc',
        radius: '12px'
      }}
    />
  );
}
```

## Customization
The `ZodEditor` component accepts optional properties so you can style it to fit seamlessly in your application:
- `theme`: An object to override default CSS variables (colors, fonts, radius, padding).
- `className`: Append custom CSS classes.
- `style`: Append custom inline styles.

## Contributing
Run the development server:
```bash
npm run dev
```

Build the library:
```bash
npm run build
```

## License
MIT