@eugene/my-ds

A minimal design system with Button and Input React components using CSS Modules.

Install

npm install @eugene/my-ds

Usage

import { Button, Input } from "@eugene/my-ds";

// Button
<Button variant="primary" size="md">Click me</Button>
<Button variant="secondary" size="lg" loading>Loading...</Button>
<Button variant="ghost" fullWidth>Full width</Button>

// Input
<Input label="Email" hint="We'll never share your email" />
<Input label="Password" error="Password is required" />
<Input label="Search" leftIcon={<SearchIcon />} size="lg" />

Button Props

| Prop | Type | Default | |-------------|-----------------------------------|-------------| | variant | primary \| secondary \| ghost | primary | | size | sm \| md \| lg | md | | loading | boolean | false | | fullWidth | boolean | false |

Input Props

| Prop | Type | Default | |-------------|-----------------------|---------| | label | string | — | | hint | string | — | | error | string | — | | size | sm \| md \| lg | md | | leftIcon | ReactNode | — | | rightIcon | ReactNode | — | | fullWidth | boolean | false |